AngularJS中的只读输入

Read only inputs in AngularJS

本文关键字：输入 只读 AngularJS      更新时间：2023-09-26

我在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)，那么当文档加载时输入将被填充?

我认为问题是这些属性在某些模型中没有绑定。当你使用{{variable}}时，angular期望它与某个模型绑定。

我在你的标签中添加了范围模型:

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

检查:http://jsfiddle.net/NKyps/9/

就像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';
    }

}

你是在angular之外操作并进行自定义DOM操作，这与angular.js的设计目的相反。我这里有一个更新过的小提琴

使用带有作用域的控制器来定义模型的值。

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变量)。

相关文章：