ui-select2和ng-options的问题

时间:2014-11-05 11:48:16

标签: angularjs ui-select2

简单的问题,可能已多次讨论过,但我无法在这个简单的问题上找到合适的解决方案。

问题: 为什么道尔顿可以选择,但所选的道尔顿不会出现在选择元素中?

控制器:

var myApp = angular.module('myApp', ['ui.select2']);

function MyCtrl($scope) {
    $scope.daltons = [
        { id: 10, name: 'Joe' },
        { id: 20, name: 'William' },
        { id: 30, name: 'Jack' },
        { id: 40, name: 'Averell' },
        { id: 50, name: 'Ma' }
    ];
    $scope.selectedDaltons = [40]; // Averell is preselected 
};

查看:

<div ng-controller="MyCtrl">
    <label for="1">Please select items:</label>
    <select id="1"
            ui-select2
            multiple
            ng-model='selectedDaltons'
            ng-options="dalton.id as dalton.name for dalton in daltons">
    </select>
    <label for="2">Selected Items:</label>
    <ul id="2">
        <li ng-repeat="dalton in selectedDaltons">{{dalton}}</li>
    </ul>
</div>

Here it is as a jsfiddle

1 个答案:

答案 0 :(得分:3)

我认为问题是ui-select2不支持ng-options。我使用带有ng-repeat的选项标签重写了你的小提琴:

http://jsfiddle.net/u48j0yyc/1/

<div ng-controller="MyCtrl">
    <label>Please select items:</label>
    <select ui-select2 multiple ng-model='selectedDaltons'>
        <option ng-repeat="d in daltons" ng-bind="d.name" value="{{ d.id }}"></option>
    </select>
    <label>Selected Items:</label>
    <ul>
        <div ng-bind="selectedDaltons"></div>
    </ul>
</div>


var myApp = angular.module('myApp', ['ui.select2']);
function MyCtrl($scope) {
    $scope.daltons = [
        { id: 10, name: 'Joe' },
        { id: 20, name: 'William' },
        { id: 30, name: 'Jack' },
        { id: 40, name: 'Averell' },
        { id: 50, name: 'Ma' }
    ];    
    $scope.selectedDaltons = [40]; // Averell is preselected 
};