[英]Angularjs how to make checkbox checked?
嗨，我正在用angularjs開發Web應用程序。 我有一種形式。 我將值綁定到多選下拉列表。
<li ng-repeat="p in locations">
<input type="checkbox" ng-checked="master" ng-model="isTrue" ng-change="getIndex(p.Location,isTrue )" ng-name="location" required/>
<span>{{p.Location}}</span>
</li>
我將數組綁定到位置。 我的數組看起來像
0: id: 1 Location:"ABC"
1: id: 2 Location:"DEF"
2: id: 3 Location:"IJK"
現在我的要求是檢查一些值。 假設如果我有var locations="ABC,DEF"那么我只想檢查那些值。 我可以知道是否可以做到。 任何幫助，將不勝感激。 謝謝。
基本上，如果我們的輸入是一個帶有應選擇位置的字符串（即var locations = 'ABC,DEF'; 我們可以用,字符分割此字符串,並獲得一個具有匹配位置的數組：
var app = angular.module('myApp', []); app.controller("locationsController", ["$scope", function ($scope) { // vars var locations = 'ABC,DEF'; // functions function init () { var locals = locations.split(','); angular.forEach($scope.locations, function (item) { if (locations.indexOf(item.Location) > -1) { item.checked = true; } }); } // $scope $scope.locations = [ { id: 1, Location: "ABC" }, { id: 1, Location: "DEF" }, { id: 1, Location: "IJK" } ]; // init init(); } ]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp"> <div ng-controller="locationsController"> <li ng-repeat="p in locations"> <input ng-checked="p.checked" type="checkbox" ng-model="p.checked" required/> <span>{{ p.Location }}</span> </li> </div> </div>
嘗試這個。 為每個復選框定義單獨的模型。
var app = angular.module('myApp', []); app.controller("Controller", ["$scope", function($scope) { $scope.locations = [{ "id": 1, Location: "ABC" }, { "id": 1, Location: "DEF" }, { "id": 1, Location: "IJK" }] var checked = ['ABC','DEF']; function init() { angular.forEach($scope.locations,function(location){ if(checked.indexOf(location.Location) != -1){ location.checked = true; } }) } init(); } ]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp"> <div ng-controller="Controller"> <li ng-repeat="p in locations"> <input type="checkbox" ng-model="p.checked" name="location" required/> <span>{{p.Location}}</span> </li> </div> </div>
它應該工作：
var app = angular.module("myApp", []); app.controller("myCtrl", function($scope,$filter) { $scope.selectedValue = 'ABC,IJK'; $scope.selectedValue = $scope.selectedValue.split(','); $scope.options = [{ id: 0, name: 'ABC' }, { id: 1, name: 'DEF' }, { id: 2, name: 'IJK' }]; $scope.selected = []; angular.forEach($scope.selectedValue,function(val,key){ var r = $filter('filter')( $scope.options, {name: val})[0].id; if(r != undefined){ $scope.selected[r]=true; }else{ $scope.selected[r]=false; } }); });
<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> <body> <div ng-app="myApp" ng-controller="myCtrl"> <li ng-repeat="p in options"> <input type="checkbox" ng-model="selected[p.id]" ng-change="getIndex(p.Location,isTrue )" /> <span>{{p.name}}</span> </li> Selected : {{selected}} </div>
嘗試此操作，因為每個復選框需要不同的ngModel，所以需要將它們放在location對象本身內。
HTML：
<li ng-repeat="p in locations">
<input type="checkbox" ng-checked="master" ng-model="p.isTrue" ng-change="getIndex(p.Location, p.isTrue)" ng-name="location" required/>
<span>{{p.Location}}</span>
</li>
用Javascript：
$scope.locations = [
{id: 1 Location:"ABC"},
{id: 2 Location:"DEF"},
{id: 3 Location:"GHI"}
];
var selectedLocations="ABC,DEF";
selectedLocations = locations.split(",");
angular.forEach($scope.locations, function(loc){
loc.isTrue = selectedLocations.indexOf(loc.Location) > -1;
});
嘗試這個：
<li ng-repeat="p in locations">
<input type="checkbox" ng-checked="p.Location == 'ABC' || p.Location == 'DEF'? true : false" ng-model="p.master" ng-change="getIndex(p.Location,isTrue )" ng-name="location" required/>
<span>{{p.Location}}</span>
</li>
像這樣添加一個checked:"true"字段checked:"true"
var app = angular.module('myApp', []); app.controller("Controller", ["$scope", function($scope) { $scope.locations = [{id:1,Location:"ABC",checked:"false"},{id:1,Location:"DEF",checked:"true"},{id:1,Location:"IJK",checked:"true"}] } ]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="myApp"> <div ng-controller="Controller"> <li ng-repeat="p in locations"> <input ng-checked="{{p.checked}}" type="checkbox" ng-model="p.id" name="location" required/> <span>{{p.Location}}</span> </li> </div> </div>
將另一個變量添加到您的數組。 並在其中設置值true / false
0: id: 1 Location:"ABC" flag : true
1: id: 2 Location:"DEF" flag : false
<li ng-repeat="p in locations">
<input type="checkbox" ng-checked="p.flag" ng-model="isTrue" ng-
change="getIndex(p.Location,isTrue )" ng-name="location" required/>
<span>{{p.Location}}</span>
</li>
使用該標志來選中取消選中復選框/
如何使用AngularJS通過已檢查的值來選中復選框？
[英]How to make checkbox checked through already checked values using AngularJS?
使用AngularJs提交后如何驗證復選框是否被選中？
[英]How to validate if a checkbox is checked after submit with AngularJs?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.