Question

我是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。

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

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

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

1 个答案: