Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 108,597

HOME > PHP > PHP Forum > สอบถามค่ะ checkbox ทำยังไงให้มันเรียก ID ไม่ซ้ำกัน



 

สอบถามค่ะ checkbox ทำยังไงให้มันเรียก ID ไม่ซ้ำกัน

 



Topic : 135920



โพสกระทู้ ( 3 )
บทความ ( 0 )



สถานะออฟไลน์




คือมีปัญหาเรือง Checkbox ค่ะ คือทำยังไงไม่ให้ไอดีเวลาเราติ้กถูกเข้าไปขึ้นซ้ำกันอ่ะคะ อย่างเวลาเราติ้กเลือก 1,2 แล้ว 1,2 มาแต่พอเราไปติ้กเอา 1 ออก 1 ตัวเก่าไม่หายไปและก็มี 1 ใหม่เข้ามาอีกอ่ะค่ะ อยากทราบว่า เขียน Code วนลูปยังไงหรือคะ


checkbox


Code HTML ที่เป็น Checkbox ค่ะ
<div ng-repeat="view_data_example in data_eq">

<label for="chkequipment_{{view_data_example.Eq_id}}">

<input type="checkbox" value="chk_box('1')" name="chk_box" ng-click="chk_box(view_data_example.Eq_id)"
id="chkequipment_{{view_data_example.Eq_id}}" ng-model="$scope.type_st"/> {{view_data_example.Eq_id}}
<img src = "main_data/images/eqpic/{{view_data_example.pic_equipment}}" height="100" width="100" class="img-circle">

</label>


Code Controller
$scope.chk_box = function($type_value, list){

$scope.type_st = $type_value+','+$scope.type_st;
alert($scope.type_st);
}




Tag : PHP, JavaScript, Angularjs









ประวัติการแก้ไข
2021-02-18 11:20:30
2021-02-18 11:22:20
2021-02-18 11:23:12
2021-02-18 11:25:19
Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2021-02-18 11:19:21 By : maprang77 View : 64 Reply : 4
 

 
เห็นรูปนี้แล้วคิดถึง ป้าข้างบ้าน แกใช้ AngulaJS
แกเก่งนะ เป็น พยาบาน ด้วย เป็น โปรแกรมเมอร์ด้วย เป็นทุกฯอย่างด้วย และที่สำคัญ
เป็นเมียที่ดี คนหนึ่งเลยเชียวแหละ

แกหายไป หลายวัน หลายเดือน หลายปี แล้ว เราก็สงสัยก็เลยถามบ้านข้างฯที่สนิทกัน
--- ถามว่า แกหายไปไหน
--- เพื่อนข้างบ้านแก บอกว่า ไปตามผัว หนีหายไปกับเมียน้อย
...
...






แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2021-02-18 14:27:13 By : ผ่านมา
 


 

No. 2



โพสกระทู้ ( 199 )
บทความ ( 0 )



สถานะออฟไลน์


ดูตามตัวอย่างแล้วจะเข้าใจครับ
https://material.angularjs.org/latest/demo/checkbox

(มันมี View Source ด้วยนะ)
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2021-02-18 17:09:28 By : lakornworld
 

 
สร้าง HTML ธรรมดาฯ ตั้งชื่อว่าอะไรก็ได้ เช่น นมบูด.html
Copy Source Code ไปวางแล้วเปิดด้วย Browser อะไรก็ได้ แต่แนะนำให้ใช้ FuckerMan Browser

Code (PHP)
<!DOCTYPE html>
<html ng-app="app">
<head>
    <meta charset=utf-8>
    <!--
    Created using JS Bin
    http://jsbin.com

    Copyright (c) 2021 by anonymous (http://jsbin.com/ImAqUC/1/edit)

    Released under the MIT license: http://jsbin.mit-license.org
    -->
    <meta name="robots" content="noindex">
    <title>How can AngularJS bind to list of checkbox values?</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
</head>

<body>
    <div class="container">
        <div class="page-header">
            <h1><a href="http://stackoverflow.com/q/14514461/697154">How can AngularJS bind to list of checkbox values?</a></h1>
        </div>
        <div ng-controller="SimpleArrayCtrl">
            <h3>With a simple array as input data</h3>
            <dl>
                <dt>Pros</dt>
                <dd>simple data structure and toggling by name is easy to handle</dd>

                <dt>Cons</dt>
                <dd>add/remove is cumbersome as two lists (the input and selection) have to be managed</dd>
            </dl>
            <div class="row">
                <div class="col-md-6">
                    <h4>selectables</h4>
                    <div class="form-group">
                        <label ng-repeat="fruitName in fruits" class="checkbox-inline">
                            <input type="checkbox" name="selectedFruits[]" value="{{fruitName}}" ng-checked="selection.indexOf(fruitName) > -1" ng-click="toggleSelection(fruitName)"> {{fruitName}}
                        </label>
                    </div>
                </div>

                <div class="col-md-6">
                    <p><strong>Toggling</strong> by name is easy in this case, because the needed helper method can be reused.</p>
                    <button class="btn btn-default" ng-click="toggleSelection('naartjie')">Toggle <em>naartjie</em></button>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <h4>selection</h4>
                    <pre>{{selection|json}}</pre>
                </div>

                <div class="col-md-6">
                    <h4>input</h4>
                    <pre>{{fruits|json}}</pre>
                </div>
            </div>
        </div>
        <hr>
        <div ng-controller="ObjectArrayCtrl">
            <h3>With an object array as input data</h3>
            <dl>
                <dt>Pros</dt>
                <dd>add/remove is very easy</dd>

                <dt>Cons</dt>
                <dd>somewhat more complex data structure and toggling by name is cumbersome or requires a helper method</dd>
            </dl>
            <div class="row">
                <div class="col-md-6">
                    <h4>selectables</h4>
                    <div class="form-group">
                        <label ng-repeat="fruit in fruits" class="checkbox-inline">
                            <!--
                              - use `value="{{fruit.name}}"` to give the input a real value, in case the form gets submitted
                                traditionally

                              - use `ng-checked="fruit.selected"` to have the checkbox checked based on some angular expression
                                (no two-way-data-binding)

                              - use `ng-model="fruit.selected"` to utilize two-way-data-binding. Note that `.selected`
                                is arbitrary. The property name could be anything and will be created on the object if not present.
                            -->
                            <input type="checkbox" name="selectedFruits[]" value="{{fruitName}}" ng-model="fruit.selected"> {{fruit.name}}
                        </label>
                    </div>
                </div>
                <div class="col-md-6">
                    <p><strong>Toggling</strong> by name is not so easy in this case, because the the code is either rather ugly, or a helper method is needed.</p>
                    <button class="btn btn-default" ng-click="(fruits|filter:{name:'naartjie'})[0].selected = !(fruits|filter:{name:'naartjie'})[0].selected">Toggle <em>naartjie</em></button>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <h4>selection as simple array using $watch</h4>
                    <pre>{{selection|json}}</pre>

                    <h4>selection as simple array using a custom filter</h4>
                    <pre>{{fruits|fruitSelection:'name'|json}}</pre>

                    <h4>selection using the default filter</h4>
                    <pre>{{fruits|filter:{selected:true}|json}}</pre>

                    <h4>selection using a helper function</h4>
                    <pre>{{selectedFruits()|json}}</pre>
                </div>
                <div class="col-md-6">
                    <h4>input</h4>
                    <pre>{{fruits|json}}</pre>
                </div>
            </div>
        </div>
    </div>
    <script>
        (function (app) {
            'use strict';
            app.controller('SimpleArrayCtrl', ['$scope', function SimpleArrayCtrl($scope) {
                // fruits
                $scope.fruits = ['apple', 'orange', 'pear', 'naartjie'];
                // selected fruits
                $scope.selection = ['apple', 'pear'];
                // toggle selection for a given fruit by name
                $scope.toggleSelection = function toggleSelection(fruitName) {
                    var idx = $scope.selection.indexOf(fruitName);
                    // is currently selected
                    if (idx > -1) {
                        $scope.selection.splice(idx, 1);
                    }
                    // is newly selected
                    else {
                        $scope.selection.push(fruitName);
                    }
                };
            }]);
            app.controller('ObjectArrayCtrl', ['$scope', 'filterFilter', function ObjectArrayCtrl($scope, filterFilter) {
                // fruits
                $scope.fruits = [
                    { name: 'apple', selected: true },
                    { name: 'orange', selected: false },
                    { name: 'pear', selected: true },
                    { name: 'naartjie', selected: false }
                ];
                // selected fruits
                $scope.selection = [];
                // helper method
                $scope.selectedFruits = function selectedFruits() {
                    return filterFilter($scope.fruits, { selected: true });
                };
                // watch fruits for changes
                $scope.$watch('fruits|filter:{selected:true}', function (nv) {
                    $scope.selection = nv.map(function (fruit) {
                        return fruit.name;
                    });
                }, true);
            }]);
            /**
             * custom filter
             */
            app.filter('fruitSelection', ['filterFilter', function (filterFilter) {
                return function fruitSelection(input, prop) {
                    return filterFilter(input, { selected: true }).map(function (fruit) {
                        return fruit[prop];
                    });
                };
            }]);
        })(angular.module('app', []));
    </script>
</body>
</html>


ปล. เอามาจาก JSBin ไม่ได้เขียนเองหรอกนะจ๊ะสิบอกให้
แต่มีข้อสังเกตุ ทำไมต้องใช้ AngularJS/Angular ด้วยหว่า
ถ้าผมเลือกได้ ผมไม่ใช้หรอก
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2021-02-19 07:33:56 By : ผ่านมา
 


 
เล่าเรื่องจริงให้ฟัง
หลานชายของผม (มีคนเดียว) เรียนหมออยู่ จุฬา อีก 2 ปี ก็จบแล้ว
หลานสาวของผม (มีคนเดียว) จบ ม. เชียงใหม่ ทำงานอยู่บริษัทขายยา (นอนบ้านเดียวกันกับเจ้าของบริษัท)
...
...

ที่เล่ามาไม่ใช่อวดอ้างอะไรหรอก กำลังจะบอกว่า สิ่งที่ผมกำลังทำอยู่ ณ.ช่วงสุดท้ายของชีวิต
เพื่อสิ่งที่ผมได้กล่าวมา ผมจะไม่ให้หลานฯ ของผมได้เห็น Source Code ห่วยฯ แนวทางการเขียนโปรแกรม
แบบห่วยฯ โดยเด็ดขาด เดี๋ยวมันด่าเอา ดาเก่งฉิบหาย เราได้แต่ทำตาปริบฯ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2021-02-19 08:04:32 By : ผ่านมา
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : สอบถามค่ะ checkbox ทำยังไงให้มันเรียก ID ไม่ซ้ำกัน
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: Voake, Comcube, รับทำเว็บไซต์ รับเขียนโปรแกรม , pangpond.com , pangpond.co.th , สำนักงานบัญชี.com , รถมือสอง

Load balance : Server 01
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2021 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่