无法从清单值中获取值

Question

这是我的代码。

标记：

<div ng-repeat="product in Products" ng-if="$index % 3 == 0" class="row">
    <div class="col-xs-4"> 
        <md-checkbox checklist-model="user.roles" checklist-value="{{Products[$index]}}"><span>{{Products[$index].Name}}</span></md-checkbox>
    </div>
    <div class="col-xs-4"> 
        <md-checkbox checklist-model="user.roles" checklist-value="{{Products[$index]}}"><span>{{Products[$index+1].Name}}</span></md-checkbox>
    </div>
    <div class="col-xs-4"> 
        <md-checkbox checklist-model="user.roles" checklist-value="{{Products[$index]}}"><span>{{Products[$index+2].Name}}</span></md-checkbox>
    </div>
</div>
<button ng-click="checkAll()" style="margin-right: 10px">Check all</button>
<button ng-click="uncheckAll()" style="margin-right: 10px">Uncheck all</button>
<button ng-click="checkFirst()">Check first</button>
<button ng-click="setToNull()" ng-if="setToNull">Set to null</button>

控制器：

var pramiseGet = angularService.GetProducts();


       pramiseGet.then(function (pl) {
            $scope.Products = pl.data;
           console.log($scope.Products);
        },

    function (errorPl) {
        $log.error("Error", errorPl);
    });

$scope.roles = {};
    $scope.user = {};
    $scope.sendingID = {};
    $scope.checkAll = function () {
        $scope.user.roles = angular.copy($scope.Products);
    };
    $scope.uncheckAll = function () {
        $scope.user.roles = [];
    };
    $scope.checkFirst = function () {
        $scope.user.roles.splice(0, $scope.user.roles.length);
        $scope.user.roles.push('guest');
    };

我想要做的是，当我选中复选框时，我需要在下面 div 代码所在的位置看到数据

<div class="col-xs-12 col-sm-6">
    <h3>user.roles</h3>
    <pre>{{user.roles|json}}</pre>
</div>

目前我在上面 div 中没有看到任何数据。任何帮助

Answer 1

检查以下代码，这应该可以解决您的问题。

查看

div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="p in Products">
<input ng-model="p.checked" type="checkbox" >{{p.name}}</checkbox>
</li>
</ul>
<button ng-click="checkAll()" style="margin-right: 10px">Check all</button>
<button ng-click="uncheckAll()" style="margin-right: 10px">Uncheck all</button>
<button ng-click="checkFirst()">Check first</button>
<button ng-click="setToNull()" ng-if="setToNull">Set to null</button>

{{Products}}
</div>

控制器

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.Products = [{name:'Product 1'},{name:'Product 2'},{name:'Product 3'}];
    $scope.checkAll = function(){
       $scope.Products.forEach(function(e){e.checked = true})
    }
    $scope.uncheckAll = function(){
       $scope.Products.forEach(function(e){e.checked = false})
    }
    $scope.checkFirst= function(){
       $scope.Products[0].checked = true
    }
    $scope.checkAll = function(){
       $scope.Products.forEach(function(e){e.checked = true;})
    }
    $scope.setToNull = function(){
       $scope.Products.forEach(function(e){e.checked = null;});
    }
});

Answer 2

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.Products = [{
    name: 'Product 1',id:1
  }, {
    name: 'Product 2',id:1
  }, {
    name: 'Product 3',id:1
  }, {
    name: 'Product 4',id:1
  }, {
    name: 'Product 5',id:1
  }, {
    name: 'Product 6',id:1
  }, {
    name: 'Product 7',id:1
  }, {
    name: 'Product 8',id:1
  }, {
    name: 'Product 9',id:1
  }, {
    name: 'Product 10',id:1
  }, {
    name: 'Product 11',id:1
  }, {
    name: 'Product 12',id:1
  }];
  $scope.selectedProducts = [];
  $scope.updateSelectedProducts = function(){
  $scope.selectedProducts = $scope.Products.filter(function(e){return e.checked});
  };
  $scope.checkAll = function() {
    $scope.Products.forEach(function(e) {
      e.checked = true
    });
    $scope.updateSelectedProducts();
  }
  $scope.uncheckAll = function() {
    $scope.Products.forEach(function(e) {
      e.checked = false
    });
    $scope.updateSelectedProducts();
  }
  $scope.checkFirst = function() {
    $scope.Products[0].checked = true;
    $scope.updateSelectedProducts();
  }
  $scope.checkAll = function() {
    $scope.Products.forEach(function(e) {
      e.checked = true;
    });
    $scope.updateSelectedProducts();
  }
  $scope.setToNull = function() {
    $scope.Products.forEach(function(e) {
      e.checked = null;
    });
    $scope.updateSelectedProducts();
  }
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
  <p>
    Selected Products: {{selectedProducts}}</p>
  <div ng-repeat="product in Products track by $index" ng-if="$index%3 == 0" class="row">
    <div class="col-xs-4">
      <input ng-model="Products[$index].checked" type="checkbox" ng-change="updateSelectedProducts()">{{Products[$index].name}}</checkbox>
    </div>
    <div class="col-xs-4">
      <input ng-model="Products[$index+1].checked" type="checkbox" ng-change="updateSelectedProducts()">{{Products[$index+1].name}}</checkbox>
    </div>
    <div class="col-xs-4">
      <input ng-model="Products[$index+2].checked" type="checkbox" ng-change="updateSelectedProducts()">{{Products[$index+2].name}}</checkbox>
    </div>
  </div>

  <button ng-click="checkAll()" style="margin-right: 10px">Check all</button>
  <button ng-click="uncheckAll()" style="margin-right: 10px">Uncheck all</button>
  <button ng-click="checkFirst()">Check first</button>
  <button ng-click="setToNull()" ng-if="setToNull">Set to null</button>
</br>
</br>
</br>
</br></br>
  
</div>

无法从清单值中获取值

Not able to get the value from checklist-value

angularjs

checklist-model