Question

我试图编写一个包含几个输入的简单页面，required不应为空。

这是执行此操作的代码（自包含）：

<!DOCTYPE html>
<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
        <script>
            var app = angular.module("myApp", []);
            app.controller('myController', ['$scope', function($scope) {
            }]);
        </script>
        <style>
            input.ng-invalid {
                background-color: pink;
            }
            input.ng-valid {
                background-color: lightgreen;
            }
        </style>
    </head>
    <body ng-app="myApp">
        <div ng-controller="myController">
            Description: *<input type="text" id="input-description" ng-model="req-text" required></input><br/>
            Order: *<input type="number" id="input-order" ng-model="req-number" value="100" step="100" required></input><br/>
        </div>
    </body>
</html>

我希望它能做的是从文本字段开始为空白和红色（无效），数字字段为100和绿色（有效）。

我尝试的第一件事是将ng-model s设置为同一事物的输入，但这导致数字字段在更新时更新文本字段（但不是相反）。 / p>

由于这显然不起作用，我尝试使用不同的输入模型，如我的代码所示。但是，现在两个输入的值都为0（即使是文本字段，仍应为空白），并且无法输入或编辑这两个输入。

我做错了什么，如何让Angular分别将这两个输入分别设为required？

Answer 1

你首先犯的错误是对模型使用非法标识符。 req-number不是变量的有效标识符。（记住所有这些模型实际上都被称为$scope.variableName，想象$scope.req-number）。因此，您的输入是只读的。当您检查浏览器的控制台时，您实际上可以看到。

其次，在这种情况下，value会忽略html属性input。使用控制器功能为模型设置默认值。

   app.controller('myController', ['$scope', function($scope) {
       $scope.req_number = 100;
   }]);
   ....
   <div ng-controller="myController">
        Description: *<input type="text" ng-model="req_text" REQUIRED><br/>
        Order: *<input type="number" ng-model="req_number" required><br/>
   </div>

或者，您可以使用ng-init启动模型。但是正如@ developer0333所提到的那样，不建议这样做，因为初始化逻辑是业务逻辑的一部分，而项目的发展可能会变得更复杂，只需设置原始值。

<input type="number" ng-model="req_number" ng-init="req_number=100" required><br/>

Plunker with correct code

PS 以及一条小注释，<input>

会忽略结束标记

如何在AngularJS中需要多个输入字段？

1 个答案: