当前位置:  开发笔记 > 编程语言 > 正文

如何使用angularjs在复选框列表中推送选定的值

如何解决《如何使用angularjs在复选框列表中推送选定的值》经验,为你挑选了1个好方法。

我有复选框列表,我想推选所选/已检查的值.如果我将该值推入复选框列表,则应检查.例如,我推三星Galaxy S6.如果我放三星Galaxy S6,我们需要检查报价数据因为三星Galaxy S6有一些报价.所以如果三星Galaxy S6被检查下拉应该填写提供消息.这是一个演示.我已经尝试了我的水平,但我无法解决请有人帮助我.

function Test1Controller($scope) {      
            var serverData = ["Samsung Galaxy Note", "Samsung Galaxy S6", "Samsung Galaxy Avant","Samsung Galaxy Young"];
            $scope.items= [] ;
    	//var selectedvalue = window.localStorage.getItem("selectedvalue");
    	// here selected value Samsung Galaxy S6
            var selectedvalue="Samsung Galaxy S6";
        for(var i=0;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) ; 
     }
}


{{item.name}}



1> cmrn..:

您可以通过解决几个问题使您的代码工作:

    您同时使用ng-model,并ng-selected在复选框上输入.根据Angular规范,这些不应该一起使用,因为它们可能会导致意外行为.

    您正在使用ng-click更新可用的优惠.相反,您可以提供一个功能,根据选择的项目筛选商品列表.这意味着无论何时选择或取消选择项目,都会更新商品列表.

我已经减少了你的演示,并在下面包含了一个固定版本:

function Test1Controller($scope) {
  $scope.items = [{"name": "Samsung Galaxy Note", "selected": false}, {"name": "Samsung Galaxy S6", "selected": true}, {"name": "Samsung Galaxy Avant", "selected": false}, {"name": "Samsung Galaxy Young","selected": false}];

  $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"
  }, ];

  var selectedItems = function() {
    return $scope.items.filter(function(item) {
      return item.selected;
    });
  };

  $scope.availableOffers = function() {
    var items = selectedItems();
    return $scope.offers.filter(function(offer) {
      return items.some(function(item) {
        return item.name === offer.modalname;
      });
    });
  };
}


{{item.name}}
推荐阅读
mobiledu2402851323
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有