2014-01-23 26 views
1

當勾選每個複選框時,我可以獲取所有選中的值。獲取角度手錶中的複選框組值

我想把這些值放到它們各自的組中。

這裏是我的預期成果:採用了棱角分明$表,以獲得選擇的值

IM。

$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

UPDATE:

我設法讓這些代碼我預期的結果:

$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

現在,如何讓我覈對部動態如果我有更多的團體?

+0

你能否闡述這個問題,這很難理解。也許解釋使用小提琴來解決問題的步驟。 –

+0

您好MWay,我用我最新的代碼更新了這個問題 – od3n

回答

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是更新的唯一原因。