如何創建帶有納克重複（號碼）NG-模型排列

在步驟1：要求用戶有多少輸入形式所需要的是在< input type="number" ng-model="vm.nkeys" />`

使用

第2步：想要爲每個輸入文本創建一個ng-model和名稱以數組形式表示的屬性，以便我可以捕獲每個輸入框的值;但兩者都不起作用;請參閱下面的相關代碼和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

，我需要做什麼？

來源

2016-08-01 pro.mean

看一看下面的示例代碼段：

<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。

來源

2016-08-01 14:03:09 Shashank

使用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]等之前

，在你的控制器

來源

2016-08-01 13:21:38

不工作;既不適用於'ng-model'也不適用於'name';都失敗了;是的，我已經初始化'vm.key_desc = [];' –

更新了代碼。現在試試。或者給一個jsFiddle或者plunkr –

請檢查;用plunker更新 –

嘗試初始化$scope.key_desc = []這

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

來源

2016-08-01 13:42:09 hgsongra

謝謝，但這會變成'key_desc ['0']'而不是'key_desc [0]' –

將vm變量設置爲ng模型。

(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); 
 
      }; 
 

 
     }); 
 

 
})();

<!DOCTYPE html> 
 
<html ng-app="app"> 
 

 
<head> 
 
    <link data-require="[email protected]" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /> 
 
    <link data-require="[email protected]" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" /> 
 
    <script data-require="[email protected]" 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>

型號名稱可以是具有控制器name..using VM可變連接..

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

來源

2016-08-02 04:22:07

如何創建帶有納克重複（號碼）NG-模型排列

回答

相關問題