无线电输入刷新内的 ng-model

Question

我正在使用一个包含收音机/复选框组件的 jQuery 库（是的，我知道使用 jQuery 对 Angular 不利，但这不是我使用该库的选择，我无法更改它）并且我在刷新时遇到了问题ng-model 数据（radio 库中的组件在 radio 值改变时做一个简单的点击触发事件）。

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

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

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

Answer 1

在 Angular 中，事情不像你习惯的那样工作。一旦你习惯了它，你就会喜欢你的代码更加直接和声明性。

您说：
“在这个问题中，我只想知道如何进行模型更改”

尽管如此，在您的尝试中，您正在尝试通过更改视图（以编程方式）来更改模型。就可维护性而言，这既不直观又是一场噩梦。

在 Angular 中，您应该担心数据（模型）并观察视图自动适应。

所以，如果你想改变模型，那么你需要做的就是……嗯，改变模型：

<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 发挥它的魔力并更新视图，您需要在 Angular 上下文中执行操作（ng-click 而不是 onclick 负责处理）。如果由于某种原因您不能使用ng-click，您需要通过将您的代码包装在$scope.apply() 中的changeInput() 函数中来让Angular 知道某些更改。

另请参阅此short demo。

Answer 2

我曾经只使用 angular 时遇到过类似的问题。输入的 ng-binding 必须是控制器中定义的对象的属性。我认为否则，输入值将绑定到输入自身范围内定义的变量。

那行不通：

<input type="checkbox" ng-model="selected"></input>

但那会：

<input type="checkbox" ng-model="someObject.selected"></input>

例如在你的控制器中：

$scope.someObject = {
 selected: false
};