AngularJS 中的只读输入答案

【问题标题】：Read only inputs in AngularJSAngularJS 中的只读输入
【发布时间】：2013-05-20 01:19:10
【问题描述】：

我对 agularjs 上的只读输入有一些问题。我有一些选择通过脚本更改只读输入值。但是，当我尝试将表格中的 ng-model 输出为 {{ng-model}} 时，它不会显示。

<select name="well" onChange="Update(this.value)" ng-model="well" required>
<option value="Well-01">Well-01</option>
<option value="Well-02">Well-02</option>
<option value="Well-03">Well-03</option>
</select>
<label>Region:</label>
<input type="text" name="region" value="South" ng-model="region" disabled>
<label>State:</label>
<input type="text" name="state" value="Oklahoma" ng-model="state"  disabled>
<label>Field Office:</label>
<input type="text" name="office" value="Ringwood" ng-model="office" disabled>

小提琴：http://jsfiddle.net/NKyps/7/

当我更改它时它显示 {{well}} 但不显示输入。感谢帮助。 PS：如果有人知道如何使用默认选项（例如：well-01），那么在加载文档时将填充输入？

【问题讨论】：

标签： javascript select input angularjs

【解决方案1】：

您在 Angular 之外进行操作并进行自定义 DOM 操作，这与 angular.js 的设计目的相反。我有一个updated fiddle here。

使用具有范围的控制器来定义模型的值。

function ExampleController($scope) {

    $scope.Update = function () {
        if ($scope.well == "Well-01") {
            $scope.region = 'South';
            $scope.state = 'Oklahoma';
            $scope.office = 'Ringwood';
        }

        if ($scope.well == "Well-02") {
            $scope.region = 'North';
            $scope.state = 'Montana';
            $scope.office = 'Sidney';
        }

        if ($scope.well == "Well-03") {
            $scope.region = 'North';
            $scope.state = 'North Dakota';
            $scope.office = 'Tioga';
        }
    }

    $scope.well = 'Well-01';
    $scope.Update();
}

您的设计的主要问题是您试图维护 2 个全等模型，一个在 javascript 中，另一个在 dom 中。 Angular.js 擅长为你处理 dom 操作，所以你只需要担心更新你的模型。与其尝试手动更新 dom，只需构建视图以便它从模型生成自身，然后只允许自己更新 javascript 模型（$scope 变量）。

【讨论】：

我认为您的链接不正确。似乎它指向旧的 jsFiddle。正如我在回答中所说，我会使用手表而不是更新方法。 AngularJS 在初始化期间调用手表一次，以便初始化模型。然后当井模型改变时调用它。
好的，我明白了。您使用 ng-change 指令而不是 $watch 可能遵循 onChange 事件处理程序的初始模式。
我同意手表更好。所以应该使用更好的控制器形式和更好的数据模型，但对于显然刚刚开始使用它的人来说，我喜欢坚持使用文档中使用的模式，因为我认为它更容易关联。跨度>

【解决方案2】：

正如 Bart 所说，您缺少 AngularJS 的基本概念，应该阅读 http://docs.angularjs.org/tutorial 的 AngularJS 教程。

AngularJS 是关于两种方式的数据绑定。因此，当您作为开发人员只更新模型时，它会负责更新 DOM。像你一样访问输入字段的值属性不是你使用 Angular 的方式。

我已将您的 jsFiddle 更新为工作版本，但您应该阅读教程以了解 AngularJS 背后的概念。

http://jsfiddle.net/BnqZS/1/

如您所见，您首先需要一个控制器来处理业务逻辑。在控制器中观察并更新模型。所以不是

if (choice == "Well-01") {
    region.value = 'South';
    state.value = 'Oklahoma';
    office.value = 'Ringwood';
}

您实际上应该在已绑定到选项输入的模型上设置手表并写入：

$scope.$watch('well', function(choice) {
  if (choice == "Well-01") {
        $scope.region = 'South';
        $scope.state = 'Oklahoma';
        $scope.office = 'Ringwood';
    }

}

【讨论】：

感谢您的建议，我会注意的。

【解决方案3】：

我认为问题在于这些属性在某些模型中没有约束力。当您使用 {{variable}} 角度时，期望它与某些模型绑定。

我在您的标签中添加了范围模型：

<form ng-controller="Sarapastrule" name="form">
</form>

签到：http://jsfiddle.net/NKyps/9/

【讨论】：