Question

我是Angular的新手。我正在修改包含用户列表的现有管理页面，以及为每个用户切换开/关角色的功能。我试图将观察者添加到每个角色，以便我可以保存更改。

我正在使用用户指令（用于多个用户对象），并获取json（一组用户对象，带有一组角色），从ajax调用填充它：

[
    {
        "Email": "foo@bar.com",
        "Roles": [
            {
                "Role": "admin",
                "HasRole": true
            },
            ...
        ]
    },
    ...
]

在我的用户指令html template / snippet中，名为user_card.html，我循环遍历角色以输出单选按钮：

<div class="permission" ng-repeat="role in user.Roles">
    <p>{{role.Role}} -- {{role.HasRole}}</p>

    <input type="radio" id="{{user.Email}}_{{role.Role}}_false" ng-attr-name="{{user.Email}}_{{role.Role}}" ng-value="false" ng-model="role.HasRole" />
    <label for="{{user.Email}}_{{role.Role}}_false"><span></span>Off</label>

    <input type="radio" id="{{user.Email}}_{{role.Role}}_true" ng-attr-name="{{user.Email}}_{{role.Role}}" ng-value="true" ng-model="role.HasRole" />
    <label for="{{user.Email}}_{{role.Role}}_true"><span></span>On</label>
</div>

我可以看到ng-model工作正常，因为在上面的代码片段中，我可以看到{{role.HasRole}}在true和false之间切换。

我尝试做的是添加观察者，以便在更改角色时触发观察者。我试过这个代码（以及几个变种）无济于事。这是User指令（user_card_directive.js）背后的JavaScript：

scope.user.Roles.forEach(function (role) {
    console.log(role);

    scope.$watch('role.HasRole', function (newValue, oldValue) {

        if (newValue !== oldValue) {
            console.log(newValue);
        };
    });
});

我猜测我在这个user_card_directive.js中做了一些不正确的事情来为角色添加一个观察者。

提前感谢您的帮助！

干杯，丹

Answer 1

您可以对数组对象进行深入监视，而不是循环遍历users并向每个role添加观察程序，而不是如下所示：

$scope.$watch('user.Roles.HasRole', function (newValue) {
 //Whatever you want to do after watch triggered 
 ...

}, true);

Answer 2

您可以使用ng-change指令实现此目的。当用户更改输入时，它会评估给定的表达式。

<div class="permission" ng-repeat="role in user.Roles">
    <p>{{role.Role}} -- {{role.HasRole}}</p>

    <input type="radio"  ng-change="roleUpdated(role)" id="{{user.Email}}_{{role.Role}}_false" ng-attr-name="{{user.Email}}_{{role.Role}}" ng-value="false" ng-model="role.HasRole" />
    <label for="{{user.Email}}_{{role.Role}}_false"><span></span>Off</label>

    <input type="radio" ng-change="roleUpdated(role)" id="{{user.Email}}_{{role.Role}}_true" ng-attr-name="{{user.Email}}_{{role.Role}}" ng-value="true" ng-model="role.HasRole" />
    <label for="{{user.Email}}_{{role.Role}}_true"><span></span>On</label>
</div>

控制器：

$scope.roleUpdated= function(newRole) {
     console.log(newRole);
}

AngularJS：将观察者分配给在ng-repeat中创建的输入

2 个答案: