Question

我对agularjs上的readonly输入有些问题。我有一些选择哪些更改只读输入值的脚本。但是当我尝试通过表格中的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），那么在加载文档时会填充输入吗？

Answer 1

我认为问题是那些属性在某些模型中没有约束力。使用{{variable}} angular expect时，这与某些模型绑定。

我在您的代码中添加了作为范围模型：

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

登记入住：http://jsfiddle.net/NKyps/9/

Answer 2

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

Answer 3

正如巴特所说，你缺少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';
    }

}

只读AngularJS中的输入

3 个答案: