AngularJS：指定觀察者以ng-repeat創建的輸入

我是Angular的新手。我正在修改包含用戶列表的現有管理頁面，並且可以爲每個用戶開啓/關閉角色。我正在嘗試向每個角色添加監視器，以便我可以保存更改。AngularJS：指定觀察者以ng-repeat創建的輸入

我使用的用戶指令（用於多用戶對象），並獲得從一個AJAX調用填充它JSON（用戶對象的數組，與角色的陣列）：

[ 
    { 
     "Email": "[email protected]", 
     "Roles": [ 
      { 
       "Role": "admin", 
       "HasRole": true 
      }, 
      ... 
     ] 
    }, 
    ... 
]

在我的用戶指令HTML模板/代碼片段稱爲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-模型是否工作正常，因爲在上面的代碼段，我可以看到{{role.HasRole}}在true和false之間變化。

我想要做的是添加一個觀察器，以便角色發生更改時，將會觸發一個觀察器。我已經試過這個代碼（和幾個變種）無濟於事。這裏的用戶指令後面的JavaScript（user_card_directive.js）：

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對角色添加一個觀察者。

非常感謝您的幫助！

乾杯，丹

來源

2017-01-09 Dan Gilberstadt

爲什麼你需要一個手錶？對於範圍值的任何更改，角將觸發其摘要循環。我想簡單的ng-click/ng-change就足夠了。 – Yauza

而不是通過users循環和增加守望每個role的，你可以一個數組對象像下面上做了深刻的手錶：

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

}, true);

來源

2017-01-09 18:20:05 superUser

嘿suzo，謝謝你的迴應！我很感激。我明白你的意思了，但我仍然無法讓手錶工作。我可以用ng-change來獲得它;簡單地使用ng-change有什麼問題嗎？ –

您可以通過實現這一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); 
}

來源

2017-01-09 18:28:40

謝謝Manuel！我在ng-change上工作。我發現由於我的代碼在一個指令中，所以我必須在user_card_directive.js而不是Controller中創建一個方法。現在我應該可以做我需要的:) –

AngularJS：指定觀察者以ng-repeat創建的輸入

回答

相關問題