选择Angular进行多重选择

时间:2015-02-02 07:37:06

标签: javascript jquery angularjs

我正在研究这个小提琴HERE

这是我的控制器

angular.module('demoApp', []).controller('DemoController', function($scope) {

  $scope.options = [
    { label: 'one', value: 'a' },
    { label: 'two', value: 'b' },
    { label: 'three', value: 'c' },
    { label: 'four', value: 'd' }
  ];

  $scope.selected = [{ 'sel': 'a' },{ 'sel': 'b' },{ 'sel': 'c' } ] ;


});

$scope.options是我选择dom的选项,$scope.selected是我选择dom中的所选项目

这是我的index.html

<body ng-app="demoApp">
    <div ng-controller="DemoController">
        <div ng-repeat="data in selected">
            <select ng-model="data.sel"
                ng-options="opt as opt.label for opt in options">
            </select>
            selected must be : {{data.sel}}
        </div>
    </div>
</body>

我拥有的是这个

enter image description here

我需要的是在第一次加载时必须像这样选择

enter image description here

任何人都可以帮助我吗?

2 个答案:

答案 0 :(得分:2)

您可以使用ngInit作为默认值:

<body ng-app="demoApp">
    <div ng-controller="DemoController">
        <div ng-repeat="data in selected">
            <select ng-model="data.sel"
            ng-options="opt.value as opt.label for opt in options" ng-init="data.sel = data.sel || options[$index].value">
        </select>
            selected must be : {{data.sel}}
        </div>
    </div>
</body>

fiddle

答案 1 :(得分:0)

您可以使用ng-initng-model选择$index值:

<select ng-model="data.sel" ng-options="opt as opt.label for opt in options" ng-init="data.sel = options[$index]"></select>

更新了您的Fiddle