2014-06-11 43 views
0

我是新來的angularjs,實際上從jQuery背景,我創建了一個演示數組中選定的選項的小提琴。但是在我之間使用了jQuery $ .each函數(可能必須使用angular.forEach,但沒有達到結果),需要優化的解決方案,沒有使用jQuery的功能

1.請僅使用角函數完全糾正我的功能,
2.也請建議我可行/標準的做這個功能的方法。由於此複選框的數量可能隨選擇框中的選項一起增加或減少。

<div ng-app="checkbox" ng-controller="chkController"> 
    Check me to select: <br/> 
    <input type="checkbox" ng-model="selected1" ng-click="getSelectedIds()" />Hello 1<br/> 
    <input type="checkbox" ng-model="selected2" ng-click="getSelectedIds()" />Hello 2<br/> 
    <input type="checkbox" ng-model="selected3" ng-click="getSelectedIds()" />Hello 3<br/> 
    <input type="checkbox" ng-model="selected4" ng-click="getSelectedIds()" />Hello 4<br/> 
    <input type="checkbox" ng-model="selected5" ng-click="getSelectedIds()" />Hello 5<br/> 

<select id="selectBox" multiple="multiple" style="width:200px;" > 
    <option id="greet1" ng-selected="selected1">Hello 1!</option> 
    <option id="greet2" ng-selected="selected2">Hello 2!</option> 
    <option id="greet3" ng-selected="selected3">Hello 3!</option> 
    <option id="greet4" ng-selected="selected4">Hello 4!</option> 
    <option id="greet5" ng-selected="selected5">Hello 5!</option> 
</select> 
    <input type="button" value="Show Selected" ng-click="showValues();" /> 
</div> 

,在我的控制器

var checkbox = angular.module('checkbox', []); 

    checkbox.controller('chkController', function($scope){  
     $scope.myArr = []; 
     $scope.getSelectedIds = function(){ 

      $("select option").each(function(i, j){ 

       if($(j).is(':selected') && ($scope.myArr.indexOf($(j).attr("id")) == -1)){ 
       $scope.myArr.push($(j).attr("id")); 
       } 

      }); 

     }; 
     $scope.showValues = function(){ 
      console.log($scope.myArr); 
     } 
    }); 

Fiddle Demo

回答

1

我已經把你的jsfiddle和更新,它是多棱角方式

http://jsfiddle.net/M44RF/6/

你可以看到,我實現了2 NG-重複

<label ng-repeat="chk in dataForCheckboxes" style="display: block"><input type="checkbox" ng-model="chk.selected"/>{{chk.label}}</label> 

<select id="selectBox" multiple="multiple" style="width:200px;height: 300px;" ng-model="selectedChk"> 
    <option value="{{chk.label}}" ng-repeat="chk in dataForCheckboxes" ng-selected="chk.selected">{{chk.label}}</option> 

這是因爲MVC中的視圖應該由控制器驅動

Information on angularJS $filter

乾杯

+0

出色的執行,非常清晰易懂,我想我必須先學習函數,多謝朋友 –

+0

很高興你喜歡它,如果你需要更多的幫助加入我們#angularjs irc頻道 – maurycy