 |
สอบถามค่ะ checkbox ทำยังไงให้มันเรียก ID ไม่ซ้ำกัน |
| |
 |
|
|
 |
 |
|
เห็นรูปนี้แล้วคิดถึง ป้าข้างบ้าน แกใช้ AngulaJS
แกเก่งนะ เป็น พยาบาน ด้วย เป็น โปรแกรมเมอร์ด้วย เป็นทุกฯอย่างด้วย และที่สำคัญ
เป็นเมียที่ดี คนหนึ่งเลยเชียวแหละ
แกหายไป หลายวัน หลายเดือน หลายปี แล้ว เราก็สงสัยก็เลยถามบ้านข้างฯที่สนิทกัน
--- ถามว่า แกหายไปไหน
--- เพื่อนข้างบ้านแก บอกว่า ไปตามผัว หนีหายไปกับเมียน้อย
...
...
|
 |
 |
 |
 |
| Date :
2021-02-18 14:27:13 |
By :
ผ่านมา |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
สร้าง 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 :
ผ่านมา |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
