Question

当勾选每个复选框时，我可以获得所有选中的值。

我想将这些值放到各自的组中。

这是我的预期结果：

{
  'pattern' : ["Plain","Self Design"],
  'colour' : ["Blue","Grey"]
}

即时使用angular $ watch来获取所选值。

$scope.$watch('filters|filter:{selected:true}', function (nv, ov, scope) {
    $scope.filter_selected = [];

angular.forEach(nv, function (value) {
    angular.forEach(value.options, function (v, k) {
        if (v.selected == true) {
            this.push(v.name);
        }
    }, $scope.filter_selected);
});
}, true);

here is the full code in fiddle

更新：

我设法用这些代码获得我的预期结果：

$scope.$watch('filters|filter:{selected:true}', function (nv, ov, scope) {
    $scope.filter_selected = {pattern: [], colour: []};
    angular.forEach(nv, function (value) {
    if (value.name == 'pattern') {
        angular.forEach(value.options, function (v, k) {
            console.log(this);
            if (v.selected == true) {

                this.push(v.name);
            }
        }, $scope.filter_selected.pattern);
    }

    if (value.name == 'colour') {
        angular.forEach(value.options, function (v, k) {
            //console.log(this);
            if (v.selected == true) {

                this.push(v.name);
            }
        }, $scope.filter_selected.colour);
    }            
});

updated fiddle

现在，如果我有更多的团体，如何使我的检查部分动态化？

Answer 1

我已更新您的代码以简化您的上述内容，希望实现您想要的结果。我真的不认为你需要手表（除非你的更新要求更复杂），但你应该能够在此基础上再创新。

http://jsfiddle.net/j35zt/

控制器代码简化如下：

app.controller('FilterCtrl', function ($scope, $http) {

    $scope.filters = [
        { name: 'pattern', placeholder: 'pattern',
          options: [
              { name: 'Plain', selected: false },      
              { name: 'Self Design', selected: false },      
              { name: 'Check', selected: false },      
              { name: 'Stripe', selected: false },      
              { name: 'Print', selected: false }
          ]},
        { name: 'colour', placeholder: 'colour',
          options: [
              { name: 'White', selected: false },
              { name: 'Blue', selected: false },
              { name: 'Grey', selected: false }
          ]}
    ];   

    $scope.updateOutput = function() {        
        $scope.filter_selected = {};
        angular.forEach($scope.filters, function(f) {
            $scope.filter_selected[f.name] = [];
            angular.forEach(f.options, function(o){
                if(o.selected){
                    $scope.filter_selected[f.name].push(o.name);   
                }
            });
        });
    } 
});

请注意，视图也需要更改以匹配控制器。基本上ng-change是更新的唯一原因。

获取角度观察中的复选框组值

1 个答案: