通过单击按钮获取选定的复选框项目答案

【问题标题】：Get Selected check box items from a click of a button通过单击按钮获取选定的复选框项目
【发布时间】：2015-07-08 07:45:17
【问题描述】：

如何通过单击按钮在重复列表中选中复选框项目的 ID 并将项目添加到变量/数组以供以后使用？

html:

<input id="btnCheck" type="button" value="Next" ng-click="addSelected()" />    
<div ng-controller="movieController">
        <ul>
            <li ng-repeat="movie in Movies">
                    <input id="chkBox-{{ movie.MovieID }}"
                         type="checkbox"
                         ng-checked="selection.indexOf(movie.MovieID) > -1"
                         ng-click="toggleSelection(movie.MovieID)"
                    />
            </li>
        </ul>
    </div>

脚本：

$scope.AddSelected = function () {
    var selected = $scope.selection
    console.log(selected);
}

$scope.selection = [];
$scope.toggleSelection = function toggleSelection(movie) {
    var idx = $scope.selection.indexOf(movie);
    if (idx > -1) {
        $scope.selection.splice(idx, 1);
    }
    else {
        $scope.selection.push(movie);
    }
};

【问题讨论】：

How can AngularJS bind to list of checkbox values?的可能重复
实际上该帖子中的答案对我有所帮助，但并非完全如此。做出选择后，如何通过单击按钮访问 $scope.selection 值，例如 console.log 并查看对象或将其保存在会话变量中。也许我对这一切的态度都是错误的。跟我来吧，伙计们，我还是很新鲜到有棱角的。

标签： javascript angularjs checkbox angularjs-ng-repeat

【解决方案1】：

您可以使用 ng-options 进行多选。更有用；

<select name="movies" ng-model="selectedMovieIDs" 
ng-options="m.MovieID as m.MovieID for m in movies">

</select>

更多详情：ngOptions

【讨论】：

【解决方案2】：

您可以创建一个自定义过滤器，该过滤器将返回一个选定的值 id，因为您需要将两个参数传递给过滤器，第一个参数将执行检查，如果为 true，则将从过滤器返回第二个参数属性数组。

标记

<body ng-app="app">
  <div ng-controller="movieController">
    {{(Movies | returnPropertyWhenCheckedTrue: 'checked' :'MovieID')}}
    <ul>
      <li ng-repeat="m in Movies">
        <input id="chkBox-{{ m.MovieID }}" type="checkbox" ng-model="m.checked"/>
      </li>
    </ul>
  </div>
</body>

过滤器

app.filter('returnPropertyWhenCheckedTrue', function() {
  return function(array, propertyToChecked, property) {
    var returnArray = [];
    angular.forEach(array, function(value, index) {
      if (value[propertyToChecked])
        returnArray.push(value[property]);
    });
    return returnArray;
  }
});

Working Plunkr

【讨论】：

不是所有的复选框都有相同的型号吗？此外，所有电影都需要放在一个数组中，因为您可以检查多部电影。
@jcubic 我在 ng-repeat 内创建，它将在子范围内创建。所以无论如何这都是独一无二的。更合适的方法是 m.checked
我觉得 "ng-change="checked && $parent.selectedMovie = m.MovieID"" 有点含糊，您介意解释一下吗？
@redM 仅在复选框为 checked 时更新 selectedMovie，如果未选中复选框，则条件将变为 false & $parent.selectedMovie 不会更新
对不起，我有点慢，我不认为这就是我所追求的。我将对问题进行编辑。