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

Question

我是 AngularJS 的新手，我正在尝试从纯粹的服务器端转移到使用前端的 AngularJS 实时实现魔法。

我有一个可以拥有多个权限的用户。创建新用户时，您可以选择多个复选框，一切正常。当用户想要更改用户的权限时，我无法重新填充复选框。

我正在使用 checklist-model 指令，可在此处找到 http://vitalets.github.io/checklist-model/

在数据库中，我有一个用户、权限和 users_permissions 表。

UsersController -Laravel

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

用户控制器 -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)我得到了这个对象

现在来看

单用户.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(assigned) 时，我只是返回未定义。

我不确定如何创建一组分配的权限以与标准权限进行比较，感谢您的建议。

Answer 1

User.get 和 Permission.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() 调用的更多详细信息，请参见下文：

• https://docs.angularjs.org/api/ngResource/service/$resource
• https://docs.angularjs.org/api/ng/service/$q