Question

我有两步表格

在第1步：询问用户需要多少输入表单

在< input type="number" ng-model="vm.nkeys" /＆gt;`

中使用步骤2中的

：想要为数组形式的 ng-model 和 name 属性创建一个输入文本，以便我可以捕获每个输入框的值;但两者都不起作用;请参阅下面的相关代码和wokrking plunker。

<div ng-show="vm.step == 2" ng-form="vm.step2form" class="step-content body" >
      <div class="text-center m-t-md">
         <div ng-repeat="n in [].constructor(vm.nkeys) track by $index" class="form-group">
            <label class="col-sm-2 control-label">{{$index+1}}</label>
              <input ng-model="key_desc" name="description_{{n}}" type="text" class="form-control" >
          </div>
      </div>
</div>

尝试ng-model="key_desc[{{$index+1}}]但没有成功; name=description_{{$index}}也无效

请参阅demo plunker

我需要做什么？

Answer 1

试试这个

<input ng-model="key_desc['{{$index}}']" name="description_{{n}}" type="text" class="form-control" >

Answer 2

查看下面的示例代码段：

<div ng-repeat="item in getNumber(key) track by $index">
  <input type="text" ng-model="text[$index]" name="input_{{$index}}" />
  <span ng-if="text[$index]">
  - {{text[$index]}}
  </span>
</div>

参阅演示here。

立即查看您的代码：

<div ng-repeat="n in vm.getNumber(vm.nkeys) track by $index" class="form-group">
   <!-- Other stuff -->
   <input id="location" ng-model="key_desc[$index]" name="description_{{n}}" type="text" class="form-control" >
</div>

见代码here。

Answer 3

将vm变量设置为ng-model。

＆＃13;

(function () {
    'user strict';
    angular.module('app',[])
        .controller('FormController', function ($log) {
            var vm  = this;
            vm.title = 'Key Manager';
            vm.step = 1;
            vm.key_desc = [];
            vm.submit = _submit;

            function _submit(){
                alert(vm.key_desc);
            }

            vm.next = function() {
                $log.debug('clicked on next');
                if(vm.step < 3 )
                    vm.step = vm.step + 1;

                vm.getKeys=function(n){
                    return new Array(n);
                };

            }

            vm.prev = function() {
                $log.debug('clicked on prev');
                if(vm.step > 0)
                    vm.step = vm.step - 1;
            }

            vm.hasPreviousStep = function(){
                var previousStep = vm.step - 1;
                return (previousStep > 0);
            };

        });

})();

＆＃13;

<!DOCTYPE html>
<html ng-app="app">

<head>
    <link data-require="bootstrap-css@3.2.0" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <link data-require="bootstrap@3.3.2" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script data-require="angular.js@1.5.7" data-semver="1.5.7" src="https://code.angularjs.org/1.5.7/angular.js"></script>
    <!--<link rel="stylesheet" href="style.css" />-->
    <script src="script.js"></script>
</head>

<body ng-controller="FormController as vm">
<h1>{{vm.title}}</h1>
<div class="row">
    <div class="col-lg-7">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>Genarate Key(s)</h5>
            </div>
            <div class="ibox-content">
                <form action="#" class="form" novalidate>
                    <div role="application" class="wizard clearfix">
                        <div class="content clearfix">
                            <div ng-form='vm.step1form' ng-show="vm.step == 1"  class="step-content body" >
                                <div class="m-t-md">
                                    <h2>Number of Keys</h2>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">Number of Keys *</label>
                                        <div class="col-sm-4">
                                            <input type="number" min="0" max="50" id="nkeys" name="nkeys" ng-model="vm.nkeys" required class="form-control required" placeholder="How many keys required" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div ng-form="vm.step2form" ng-show="vm.step == 2" class="step-content body" >
                                <div class="text-center m-t-md">
                                    <h2>This is step 2</h2>
                                    <div ng-repeat="n in [].constructor(vm.nkeys) track by $index" class="form-group">
                                        <label class="col-sm-2 control-label">{{$index+1}}</label>
                                        <div class="col-sm-4">
                                            <input id="location"  ng-model="vm.key_desc[$index]" name="description_{{n.name}}" type="text" class="form-control" >
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="actions clearfix">
                            <ul class="list-inline">
                                <li >
                                    <button ng-disabled="vm.step=='1'" type="button" class="btn btn-w-m btn-primary" ng-click="vm.prev()">Previous</button>
                                </li>
                                <li >
                                    <button type="button" class="btn btn-w-m btn-primary" ng-click="vm.next()" ng-disabled="!vm.step1form.$valid">Next</button>
                                </li>
                                <li >
                                    <button class="btn btn-primary " ng-click="vm.submit()" type="button"><i class="fa fa-check"></i>&nbsp;Submit</button>
                                </li>
                                <li>
                                    <button ui-sref="keyhouse.list" type="button" class="btn btn-w-m btn-warning" >Cancel</button>
                                </li>
                            </ul>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
</body>

</html>

＆＃13;

模型名称可以与控制器名称连接。使用vm变量..

在您的控制器中初始化控制器中的vm.key_desc = [] ..

Answer 4

使用Array element作为ng-model

<input ng-model="key_desc[$index]" name="description_{{n}}" 
type="text" class="form-control" >

此处，第一个输入的值将位于$scope.key_desc[0]中，第二个位于$scope.key_desc[1]中，依此类推

之前，在控制器中初始化$scope.key_desc = []

如何使用ng-repeat（数字）创建ng-model数组

4 个答案: