加载页面时,如何使复选框使用角度进行检查

While loading page how to make check box is checked using angular?

本文关键字:进行检查 复选框 何使 加载      更新时间:2023-09-26

我有复选框列表。根据复选框选择优惠即将到来,一切都很好。我在下面添加了我的代码

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>

在这里,当我打开页面时,复选框列表中没有任何内容被选中。我希望当我来到这个页面时,它应该检查已经选择的值是否在那里。例如,在复选框列表中选择的值三星Galaxy S6.它应该被选中。如何使这项工作,请有人帮助我。我已经尝试过了,但它对我不起作用我已经修改了我的代码,但它不起作用

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

在这里,我推送了选定的值true,但它不起作用

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

演示这里三星Galaxy S6被选中意味着下拉列表应该出现bcoz三星Galaxy S7提供

只需像这样使用ng-checked指令:

ng-checked="item.selected"

你不应该把ng模型和ng检查结合起来。来自文档:

请注意,此指令不应与ngModel一起使用,因为这可能会导致意外行为。

当然,您也可以将所选项目添加到selections数组中,而不是在每个项目上都有一个额外的selected标志。我更喜欢这种解决方案,因为它消除了不必要的冗余。

确保您将selections设置为[],并添加每个选定项目:

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