Question

我似乎无法从输入复选框中获取所选项目。

<ul>
  <li ng-repeat='shoe in shoebox'>
    <input type='checkbox' ng-model='shoe.selected' id='shoe-{{shoe.name}}'>
    <label for='shoe-{{shoe.name}}'>{{shoe.name}}</label>
  </li>
  <button ng-click='whatIsChecked(shoe.selected)'>Apply</button>
</ul>

然后在我的控制器中：

$scope.whatIsChecked = function(selectedThing) {
  console.log(selectedThing);
};

上述内容会返回undefined。

列表项目正确显示，但shoe.name似乎没有存储ng-model或已检查项目。

Answer 1

变量shoe仅在ng-repeat块中有效。

如果您想获得所选内容，请尝试filter。

<强> UPD：由于您没有所选属性，因此应通过触发ng-click事件将所选项目保留在其他位置。

请参阅下面的代码段。

angular.module("app", [])
  .controller("myCtrl", function($scope) {
  
    $scope.checkedShoes = [];
    
    $scope.shoebox = [{
        name: 'shoe1'
      },
      {
        name: 'shoe2'
      },
      {
        name: 'shoe3'
      },
      {
        name: 'shoe4'
      }
    ];
    
    $scope.save = function(e, shoe) {
      if (e.target.checked) {
        $scope.checkedShoes.push(shoe);
      } else {
        var index = $scope.checkedShoes.indexOf(shoe);
        if( index > -1) {
          $scope.checkedShoes.splice(index, 1);
        }
      }
      
    };
    
    $scope.whatIsChecked = function() {
      //var selected = $scope.shoebox.filter(function(item) {
      //  return item.selected === true;
      //});
      
      console.log($scope.checkedShoes);
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="app" , ng-controller="myCtrl">
  <ul>
    <li ng-repeat='shoe in shoebox'>
      <input type='checkbox' ng-click="save($event, shoe)" id='shoe-{{shoe.name}}'>
      <label for='shoe-{{shoe.name}}'>{{shoe.name}}</label>
    </li>
    <button ng-click='whatIsChecked()'>Apply</button>
  </ul>
</div>

Answer 2

您可以使用angular.Foreach获取已检查的项目。当您检查多个项目时，它变得很容易。

$scope.checkedItems = [];
        angular.forEach($scope.shoebox, function(value, key) {
          if (value.selected)
            $scope.checkedItems.push(value.name);
});

<强>演示

＆＃13;

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
  $scope.shoebox = [{
    name: 'Reboke',
    selected: false
  }, {
    name: 'woodlands',
    selected: false
  }, {
    name: 'Nike',
    selected: false
  }, {
    name: 'Fila',
    selected: false
  }];
  $scope.checkedItems = function() {
    $scope.checkedItems = [];
    angular.forEach($scope.shoebox, function(value, key) {
      if (value.selected)
        $scope.checkedItems.push(value.name);
    });

  }
});

＆＃13;

<html>
<head>
  <meta charset="utf-8" />
  <title>AngularJS </title>
  <link rel="stylesheet" href="style.css" />
  <script src="https://code.angularjs.org/1.4.7/angular.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
  <ul>
  <li ng-repeat='shoe in shoebox'>
    <input type='checkbox' ng-model='shoe.selected' id='shoe-{{shoe.name}}'>
    <label for='shoe-{{shoe.name}}'>{{shoe.name}}</label>
  </li>
  <button ng-click='checkedItems()'>Apply</button>
   Checked items are: {{checkedItems}}
</ul>
     
</body>
</html>

＆＃13;

Angular从复选框中获取选定值

2 个答案: