javascript - ng-model 内部 radio 输入刷新

Question

我正在使用 radio /复选框组件的 jQuery 库(是的，我知道使用 jQuery 对 Angular 来说很糟糕，但这不是我选择使用该库，我无法更改它)并且我遇到了刷新问题ng-model 数据(库中的单选组件在单选值更改时执行简单的点击触发事件)。

我注意到，虽然一次单击触发器对建模没有任何作用，但触发两次可以解决问题(但这不是我想要解决此问题的方式)。我准备了一个简单的fiddle - 我的问题的一个小例子。第一次单击按钮(在下面的代码中执行changeInput(1, 1))会更改 DOM，但对 Angular 模型没有任何作用 - 而仅单击单选按钮就可以了。执行changeInput(1,2) 与单击单选元素完全相同。

function changeInput(obj, num){
    for(var i = 0; i < num; i++){
        $('input').eq(obj).click();
    }
}

我还能做什么？在阅读 stackoverflow 时，我注意到人们说触发“输入”可以解决问题 - 但在这种情况下则不然( JSFiddle )。触发点击两次是解决这个问题的唯一方法吗？

Answer 1

在 Angular 中，事情并不像你习惯的那样工作。一旦习惯了它，您将享受到代码更加简单和声明性的特点。

你说:
“在这个问题中我只想知道如何更改模型”

尽管如此，在您的尝试中，您正在尝试通过更改 View (以编程方式)来更改模型。这既不直观，在可维护性方面也是一场噩梦。

在 Angular 中，您应该担心您的数据(模型)并观察 View 自动适应。

所以，如果您想更改模型，那么您需要做的就是......好吧，更改模型:

<input type="radio" name='test' ng-model="value" value="0" />
<input type="radio" name='test' ng-model="value" value="1" />
<button ng-click="changeInput(0)">Change value to 0</button><br/>
<button ng-click="changeInput(1)">Change value to 1</button><br/>

function Ctrl($scope) {
    $scope.value = 0;
    $scope.changeInput = function (newValue) {
        $scope.value = newValue;
    }
}

<子>为了让 Angular 发挥其魔力并更新 View ，您需要在 Angular 上下文中执行操作(用 ng-click 而不是 onclick 来处理这个问题)。如果出于某种原因您无法使用 ng-click ，您需要通过将代码包装在 changeInput() 中来让 Angular 了解某些更改。函数位于 $scope.apply() 。

另请参阅此 short demo 。