Question

我有一个AngularJS应用程序，其中包含一个用户列表，每个用户旁边都有一个“编辑”按钮。每个用户都有许多与之相关的主题。当我点击“编辑”时，它会打开一个表单，您可以在其中编辑用户详细信息，并从复选框列表中选择相关主题。我正在试图弄清楚如何绑定主题复选框，以便主题已经关联的用户已被选中，其余的未选中。任何建议表示赞赏。

我的HTML：

<form name="UserEditForm">
 Name: <br /> <input type="text" name="name" ng-model="user.name"> <br />
{{name}}

Email: <br /> <input type="text" name="name" ng-model="user.email"> <br />
{{email}}

 <div class="control-group">
            <label class="control-label" for="inputSubjects">Subjects:</label>
            <div class="form-group">
              <label ng-repeat="subject in subjects" class="checkbox">
              <input type="checkbox" ng-checked="{user.subjects}"  name="selectedSubjects[]" value="{{subject.id}}" ng-model="subject.selected"> {{subject.name}}
              </label>
        </div>

<br />

<a ng-click="updateUser()" class="btn btn-small btn-primary">Save Changes</a>

</form>

我的UserEditCtrl：

angular.module('myApp.controllers')
    .controller('UserEditCtrl', ['$scope', '$routeParams','SubjectsFactory', 'UserFactory', '$location',
    function ($scope, $routeParams, SubjectsFactory, UserFactory, $location) {

        // callback for ng-click 'updateUser':
        $scope.updateUser = function () {
            $scope.user.subjects = $scope.selection;
            UserFactory.update($scope.user);
            $location.path('/users');
        };

        // callback for ng-click 'cancel':
        $scope.cancel = function () {
            $location.path('/users');
        };

        $scope.user = UserFactory.show({id: $routeParams.userid});
        $scope.subjects = SubjectsFactory.query();

        $scope.selection = [];

    // helper method
    $scope.selectedSubjects = function selectedSubjects() {
      return filterFilter($scope.subjects, { selected: true });
    };

    // watch subjects for changes
    $scope.$watch('subjects|filter:{selected:true}', function (nv) {
      $scope.selection = nv.map(function (subject) {
        return subject.id;
      });
    }, true);


    }]);

Answer 1

正如@jkinkead所说，你的代码看起来很好，我根据你的ng-model表达式修复了ng-checked绑定

这是一个简化的plunker：http://plnkr.co/edit/qaIBExtVbNdSXlQlbMym?p=preview

编辑1：我对编辑进行了编辑和改进，以便更接近你的案例。

AngularJS绑定复选框以建模属性

1 个答案: