加载页面时如何使用角复选框选中？

Question

I have list of checkbox .based on checkbox select offers is coming everything is working fine.i have added my code below

 function Test1Controller($scope) { var serverData = ["Samsung Galaxy Note", "Samsung Galaxy S6", "Samsung Galaxy Avant","Samsung Galaxy Young"]; $scope.items= [] ; for(var i=0;i<serverData.length;i++) { var modal = { name:serverData[i], selected:false }; $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> 

here when i open page nothing is checked in that checkbox list.my expectation when i come to this page it should check already selected value is there or not if it's there selected value should checked in that checkbox list. for example selected value Samsung Galaxy S6.in that checkbox list it should be checked .how to make this work pls some one help me out .i have tried but its not working for me i have modified my code but it's not working

//var selectedvalue = window.localStorage.getItem("selectedvalue");
    // here selected value Samsung Galaxy S6
    var selectedvalue="Samsung Galaxy S6";

here i have pushed selected value true but it's not working

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);        
    }

demo here Samsung Galaxy S6 is checked means dropdown should come bcoz Samsung Galaxy S6 has offer

Answer 1

Just use the ng-checked directive like this:

ng-checked="item.selected"

You should not combine ng-model and ng-checked. From the docs:

Note that this directive should not be used together with ngModel, as this can lead to unexpected behavior.

Of course you can also add the selected item to the selections array instead of having an additional selected flag on each item. I would prefer this solution because it eliminate unnecessary redundancy.

Make sure you set selections to [] a the beginning and add each selected item:

if (selectedvalue.indexOf(serverData[i]) >= 0 || null) {
    selection.push(modal);
}