1

我对 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），那么在加载文档时将填充输入？

4

3 回答 3

0

正如 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';
    }

}

于 2013-05-24T12:51:45.190 回答
0

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

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

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

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

于 2013-05-24T12:45:05.177 回答
0

您在 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 变量）。

于 2013-05-24T12:46:18.007 回答