以angularjs形式进行多重选择

时间:2015-03-08 10:46:16

标签: angularjs forms select

我有一个简单的表单,用于通过REST API编辑现有对象(事件)。如果id作为参数传递,我的控制器会调用服务来预填充表单。

这是html代码:

<div class="jumbotron">
    <div ng-controller="PersonListCtrl">
      <form novalidate class="simple-form" ng-controller="EventController">
        Title*: <input type="text" ng-model="event.title" /><br />
        Subtitle: <input type="text" ng-model="event.subtitle" /><br />
        Speakers:
        <select
            multiple ng-model="event.speakers"
            ng-multiple="true"
            ng-options="person.id as person.name for person in persons">
        </select><br />
        <input type="submit" ng-if="event.id" ng-click="update(event)" value="Save" />
        <input type="submit" ng-if="!event.id" ng-click="create(event)" value="Create" />
      </form>

      <pre>event: {{event | json}}</pre>
      <pre>speakers: {{event.speakers | json}}</pre>
    </div>

这是控制器:

jugtaasApp.controller('EventController', function($scope, $http, $routeParams) {

    $scope.event = {};

    $scope.update = function(event) {
        // TODO: update
    };

    $scope.create = function(event) {
        // TODO: create
    };

    if(!$routeParams.id) {
        return;
    }

    $http.get('services/events/' + $routeParams.id)
    .success(function(data) {
        $scope.event = angular.copy(data);
        $scope.event.speakers = [$scope.persons[0]];    
    });
});

PersonListCtrl调用其他服务来检索可用发言人列表。

使用此代码正确调用服务/事件并正确填充字段(标题和字幕),但多个选择(扬声器)除外。

多重选择包含所有可用的人,但如果事件有一些发言者,则不会选择它们作为选项。

我该怎么办?

1 个答案:

答案 0 :(得分:0)

问题在于使用select,因为使用以下指令(并且没有更改)它可以工作:

<select multiple ng-multiple="true"
    ng-model="event.speakers"
    ng-options="person.name + ' ' + person.surname for person in persons"
></select>

我认为正在改变被比较的对象以确定选择。

此链接对解决我的问题非常重要:http://jsfiddle.net/maku/TXPJZ/