javascript - ng-repeat with form in angularjs

Question

我已经使用 ng-repeat 指令创建了动态表单。我根据 userid 值获取表单字段。一旦我填写了表单中的每个字段，我的添加用户按钮就应该被启用。截至目前，它尚未启用。我在下面附上了我的代码。

我的html代码:

<div ng-app="myApp">

<div ng-controller="myCtrl">
    <form role="form" name='userForm' novalidate>
        <div class="container">
            <div class="row" ng-repeat="myid in userid">

                <div class="form-group">
                    <div class="col-md-3">
                        <label>ID</label>
                        <input ng-model="myid" id="myid" name="myid" placeholder="Enter bugid" type="text" required readonly disabled>
                    </div>
                    <div class="col-md-3">
                        <label>Comments</label>
                        <textarea ng-model="manualComment" id="textarea1" rows="1"></textarea>
                    </div>

                    <div class="col-md-3 ">
                        <label>Gender</label>

                        <select ng-model="gender" name="select2">
                            <option value="male">Male</option>
                            <option value="female">Female</option>

                        </select>
                    </div>
                </div>

            </div>
        </div>
        <div class="buttonContainer text-center btn-container">
            <br>
            <button ng-disabled="!(myid  && manualComment && gender)" type="button" id="adduser">Add user</button>
            <button type="button" class="btn button--default btn--small pull-center">Close</button>
        </div>
    </form>
</div>

我的 app.js 文件

var myApp = angular.module('myApp', []);
myApp.controller('myCtrl', function($scope) {
$scope.userid = [1, 2, 3]
});

填写所有字段后如何启用添加用户按钮？

Answer 1

更新:

如果您想将初始数组从服务器转换为使用数组，请检查此 fiddle

JSFiddle Demo

如果你想要一个包含所有表单值的对象，请引用下面的 fiddle !

JSFiddle Demo

根据下面的陈述，这是我的解决方案。

How can I enable add user button once all field are filled?

我已经为所有输入字段添加了 required 属性，表单名称 userForm 是作用域中的一个变量。它有它的验证变量，在我的例子中，我使用的是 userForm.$invalid 这将是真实的，除非所有具有 required 属性的字段都被填充。使用 ng-disabled 属性禁用了 Add User，查看下面的 JSFiddle 演示。

JSFiddle Demo

<div ng-app="myApp">

<div ng-controller="myCtrl">
    <form role="form" name='userForm' novalidate>
        <div class="container">
            <div class="row" ng-repeat="myid in userid">

                <div class="form-group">
                    <div class="col-md-3">
                        <label>ID</label>
                        <input ng-model="myid" id="myid" name="myid" placeholder="Enter bugid" type="text" required readonly disabled>
                    </div>
                    <div class="col-md-3">
                        <label>Comments</label>
                        <textarea ng-model="manualComment" id="textarea1" rows="1" required></textarea>
                    </div>

                    <div class="col-md-3 ">
                        <label>Gender</label>

                        <select ng-model="gender" name="select2" required>
                            <option value="male">Male</option>
                            <option value="female">Female</option>

                        </select>
                    </div>
                </div>

            </div>
        </div>
        <div class="buttonContainer text-center btn-container">
            <br>
            <button ng-disabled="userForm.$invalid" type="button" id="adduser">Add user</button>
            <button type="button" class="btn button--default btn--small pull-center">Close</button>
        </div>
    </form>
</div>
</div>