Loudev 多选与 ng-options答案

【问题标题】：Loudev multiselect with ng-optionsLoudev 多选与 ng-options
【发布时间】：2017-03-30 11:42:16
【问题描述】：

我正在尝试使用 angular ng-options 实现大声多选。问题是，它没有返回错误，但选择列表为空。

 <select ng-options="item.label for item in list" 
         lp-multi-select multiple="multiple" 
         class="multi-select" ng-model="$scope.selected"></select>

【问题讨论】：

"lp-multi-select" 这是任何自定义指令吗？
嗨 Mohammad，是的，这是一个自定义指令。 :)

标签： angularjs ng-options jquery-multiselect

【解决方案1】：

你不能在 ng-model 中写“$scope”，因为它没有在那里定义。所以规则是 Angular 控制器 js 中的“$scope.selected”与 ng-model 中的“selected”一样--

ng-model="selected"

如果你这样做了，那么它会将你的多个选择的选项作为对象数组返回。你可以看到下面的例子（选择两个选项然后单击检查按钮查看结果）--

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

<body>

    <div ng-app="myApp" ng-controller="datCtrl">
		<select ng-options="item.label for item in list" multiple="multiple" class="multi-select" ng-model="selected">
		</select>
		<button ng-click="checkM()">Check</button>
        

    </div>

    <script>
        var app = angular.module('myApp', []);
        app.controller('datCtrl', function ($scope) {
            $scope.list=[{id:1,label:"banana"},{id:2,label:"mango"},{id:3,label:"apple"},{id:4,label:"water melon"}];
			$scope.checkM=function (){
				console.log($scope.selected);
			};
        });
		
    </script>

    

</body>

</html>

【讨论】：

嗨，Mohammad，很抱歉我迟到了回复。感谢您指出这一点，但我发现问题在于大声多选有自己的打印选项元素的方式。这就是为什么它不适用于 Angular ng-options。