AngularJS：採用NG-選擇選擇多個選項，根據收集

我有對象的兩個數組，一個數組是另一個的一個子集：AngularJS：採用NG-選擇選擇多個選項，根據收集

$scope.taskGroups = [ 
    {id: 1, name: 'group1', description: 'description1'}, 
    {id: 2, name: 'group2', description: 'description2'}, 
    {id: 3, name: 'group3', description: 'description3'} 
]; 

$scope.selectedGroups = [ 
    {id: 1, name: 'group1', description: 'description1'}, 
    {id: 2, name: 'group3', description: 'description3'} 
];

後不成功試圖讓我的頭周圍採用ng-option ，我想我也許可以創建一個函數來確定是否選擇應在select列表中選擇，基於我的文檔中撈起：

ngSelected - 指令模塊NG設置所選屬性在元素上t，如果ngSelected內部的表達式是真的。

所以，我想出了這個功能：

$scope.inSelectedGroups = function(taskGroup) { 
    angular.forEach($scope.selectedGroups, function(group) { 
    if (taskGroup.id == group.id) { 
     return true; 
    } 
    return false; 
    }); 
};

，並試圖在這個網站使用它：

<select multiple ng-model="selectedGroups" style="width: 100%" size="7"> 
    <option ng-repeat="taskGroup in taskGroups" value="{{taskGroup.id}}" ng-selected="inSelectedGroups(taskGroup)">{{taskGroup.name}}</option> 
</select>

但是，沒有骰子 - 的taskGroups節目的完整列表，但selectedTaskGroups沒有，很好，被選中...

我在這裏叫錯了樹嗎？

來源

2016-06-28 Trevor Turney

？在下一個選擇框或明文 –

這將全部在同一個選擇框中。基本方案是我有一個可以屬於多個任務組的任務。編輯任務時，我想顯示包含所有任務組的選擇列表，並選擇當前關聯的組。 –

意味着當您從任務組中選擇任務時，該選擇框將在同一個選擇框中顯示所有selectedGroups。那麼列出的其他任務將在哪裏？ –

taskGroups的完整列表顯示，但selectedTaskGroups不是，，選中。

我想它是使用ngSelected屬性，你的解決方案，但我也讓我嘗試使用ngOptions反而不成功和它的作品。

angular.module('app', []).controller('TestController', ['$scope', 
 
    function($scope) { 
 
    $scope.taskGroups = [{ 
 
     id: 1, 
 
     name: 'group1', 
 
     description: 'description1' 
 
    }, { 
 
     id: 2, 
 
     name: 'group2', 
 
     description: 'description2' 
 
    }, { 
 
     id: 3, 
 
     name: 'group3', 
 
     description: 'description3' 
 
    }]; 
 

 
    $scope.selectedGroups = [{ 
 
     id: 1, 
 
     name: 'group1', 
 
     description: 'description1' 
 
    }, { 
 
     id: 2, 
 
     name: 'group3', 
 
     description: 'description3' 
 
    }]; 
 

 

 
    } 
 
])

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" ng-controller="TestController"> 
 
    <select multiple="true" ng-model="selectedGroups" style="width: 100%" ng-options="taskGroup.id as taskGroup.description for taskGroup in taskGroups track by taskGroup.id" size="7"> 
 
    </select> 
 
</div>

要顯示任務組

來源

2016-06-28 03:59:38

謝謝alex_andrea，這個伎倆！事實證明，我非常接近我的'ng-options'嘗試;我在'in'條款中使用了錯誤的表格。（不調用指令'ng-option'可能會有幫助，以及...）這是有道理的，我今天肯定也學到了一些東西... +1 :) –

@TrevorTurney歡迎您:) –

這樣做的功能在於，適當的任務組顯示爲選中狀態，並且正確標記爲一個答案。我看到的唯一的其他問題是，如果我嘗試更改任務的任務組，則選擇似乎被打破 - 不能再刪除組或添加其他問題。對此有何想法？我正在用'$ watch'關注選定的羣組......再次感謝！ :) –

仔細看，你正在返回從函數的布爾值angular.forEach參數定義，因此沒有從inSelectedGroups函數返回

嘗試修改你的函數：

$scope.inSelectedGroups = function(taskGroup) { 
    var flag = false; 
    angular.forEach($scope.selectedGroups, function(group) { 
    if (taskGroup.id == group.id) { 
     flag = true; 
     return; 
    } 
    flag = false; 
    return; 
    }); 
    return flag; 
};

來源

2016-06-28 03:57:38

這似乎沒有工作。我得到完整的任務組列表，但沒有選擇任何組。另外，我會認爲返回true將會破壞函數，而不僅僅是forEach塊。情況並非如此嗎？ –

AngularJS：採用NG-選擇選擇多個選項，根據收集

回答

相關問題