如何使用AngularJS通过已检查的值来选中复选框？

Question

 function Test1Controller($scope) { var storeid = window.localStorage.getItem("storeid"); var serverData = ["Samsung Galaxy Note", "Samsung Galaxy S6", "Samsung Galaxy Avant","Samsung Galaxy Young"]; $scope.items= [] ; var selectedvalue="Samsung Galaxy S6"; for(var i=0;i<serverData.length;i++) { var modal = { name:serverData[i], selected:false }; if (selectedvalue.indexOf(serverData[i]) >= 0 || null) { modal.selected = true; } $scope.items.push(modal); } //----------------------------Our Shop Offers---------------------------------------- $scope.offers = [ { id: "as23456", Store: "samsung", Offer_message:"1500rs off", modalname: "Samsung Galaxy Young" },{ id: "de34575", Store: "samsung", Offer_message:"20% Flat on Samsung Galaxy S6", modalname: "Samsung Galaxy S6" }, ] //----------------------------------------------------------------------------------- $scope.selection = []; $scope.toggleSelection = function toggleSelection(item) { $scope.gotOffers=[]; var idx = $scope.selection.indexOf(item); // is currently selected if (idx > -1) { $scope.selection.splice(idx, 1); } // is newly selected else { $scope.selection.push(item); } for(var i=0;i<$scope.selection.length;i++){ for(var j=0;j<$scope.offers.length;j++){ console.log($scope.selection[i].name +" "+ $scope.offers[j].modalname) if( $scope.selection[i].name == $scope.offers[j].modalname){ var idx = $scope.gotOffers.indexOf($scope.offers[j].Offer_message); if(idx == -1){ console.log("inside idx") $scope.gotOffers.push($scope.offers[j]); } } } } console.log($scope.offers); }; //--------------------------------------------------------------------------------------- $scope.check = function() { var checkedItems = []; console.log($scope.offerSelected) for(var i=0;i<$scope.items.length;i++) { if($scope.items[i].selected){ checkedItems.push($scope.items[i].name); } } console.log(checkedItems) ; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script> <div ng-app> <div ng-controller="Test1Controller" > <div ng-repeat="item in items"> <input type="checkbox" ng-model="item.selected" ng-checked="selection.indexOf(item) > -1" ng-click="toggleSelection(item)"/> {{item.name}} </div> <select ng-show="gotOffers.length > 0" ng-model="offerSelected"> <option ng-repeat="offer in gotOffers" value="{{offer.id}}">{{offer.Offer_message}}</option> </select> <input type="button" name="submit" value="submit" ng-click="check()"/> </div> </div> 

在这里，我有两页第一页本身，我选择了三星Galaxy S6，并且我将移至下一页摘要页，您可以在此处看到复选框列表1.三星Galaxy Note 2.三星Galaxy S6 3.三星Galaxy Avant 4.三星Galaxy Young

在此列表中，我要输入2.Samsung Galaxy S6应该被选中。SamsungGalaxy S6有一些报价。在该复选框列表中，Samsung Galaxy S6被选中了一个下拉菜单，它应该显示报价。

这是我的期望： 演示，但不能正常工作，我已经删除了这一行ng-checked="selection.indexOf(item) > -1" ng-click="toggleSelection(item)"

我的原始代码： demo。在此，我想在该复选框列表中推送所选值，请帮助我

Answer 1

您可以使用item.Selected属性来选中/取消选中复选框

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>   
 <div ng-app>
  <div ng-controller="Test1Controller" >
  <div ng-repeat="item in items">
  <input type="checkbox" ng-model="item.selected"  ng-checked="item.selected" ng-click="toggleSelection(item)"/>   
   {{item.name}}
 </div>
<select ng-show="gotOffers.length > 0" ng-model="offerSelected">
  <option ng-repeat="offer in gotOffers"  value="{{offer.id}}">
 {{offer.Offer_message}}</option>
  </select>

  <input type="button" name="submit" value="submit" ng-click="check()"/>
 </div>
 </div>