AngularJS重新填充复选框以进行编辑

时间:2014-06-18 20:47:06

标签: javascript angularjs checkbox

我是AngularJS的新手,我正试图从纯粹的服务器端转移到使用AngularJS在前端实时发生魔术。

我有一个可以拥有多个权限的用户。创建新用户时,您可以选择多个复选框,一切正常。我在重新填充用户想要更改用户权限的复选框时遇到问题。

我正在使用清单模型指令,可在此处找到http://vitalets.github.io/checklist-model/

在数据库中,我有一个users,permissions和users_permissions表。

UsersController -Laravel

public function show($id)
{
    $user = User::with('permissions')->find($id);
    return $user;
}

UserController -Angular

Users.controller('UserController', ['$scope', '$routeParams', 'User', 'Permission', function($scope, $routeParams, User, Permission) {
    $scope.user = User.get({ id: $routeParams.id });
    $scope.permissions = Permission.query();
}]);

因为我在服务器端将权限附加到用户,所以当我console.log($scope.user)时,我得到了这个对象

enter image description here

现在是视图

单user.html

   <h4>Manage Permissions</h4>
    <div class="form-group">
        <label ng-repeat="permission in permissions">

        <input type="checkbox" checklist-model="user.permissions" checklist-value="permission.id" class="checkbox-inline">
            {{ permission.display_name }}
        </label>
    </div>
    <button class="btn btn-success" type="submit">Save</button>

我认为我可以在控制器中创建一个包含$scope.user.permissions.id的指定变量,然后将这些值与$scope.permissions.id进行比较,如果匹配,则选中复选框。

当我尝试创建$scope.assigned = $scope.user.permissions.id和console.log(已分配)时,我刚刚返回undefined。

我不知道如何创建一个分配的权限数组来与标准权限进行比较,这要归功于任何建议。

1 个答案:

答案 0 :(得分:0)

User.getPermission.query看起来像是在使用$resource。这些将返回将(如果一切顺利)解析为您的数据而不是返回数据本身的承诺。这些调用是异步的。因此,您需要传递一个在异步调用完成时调用的函数参数。

当你在console.log测试期间得到undefined时,那是因为在$scope.user.permissions.id中,$scope.user实际上是一个承诺($q),而不是你的对象期待。您基本上是在评估$q.permissions.id,这是未定义的。

User.get({ id: $routeParams.id }, function(user) { $scope.user = user; });
Permission.query(function(permissions) { $scope.permissions = permissions; });

或者你可以尝试这样的事情(不是100%肯定这个)

$q.all(
    User.get({ id: $routeParams.id });
    Permission.query();
).then(function(user, permissions) { $scope.user = user, $scope.permissions = permissions });

有关如何将操作链接到User.get()Permission.query()来电的详细信息,请参阅下文: