帶有angularjs複選框的動態表單字段

Question

我想用ng-submit將輸入字段的值提交給控制器，但是當我輸入模型時顯示未定義。每個輸入值都用複選框保存。但我想檢查是否有任何複選框未選中。 這裏是形式HTML：

<form id="valueForm" ng-submit="submitValues()"> 
    <div class="small-input list padding" style="padding-top:4px;"> 
     <div ng-repeat="item in inputs track by $index"> 
      <label class="item item-input"> 
        <input type="text" placeholder="" ng-model="value" ng-disabled="ticked"> 
        <ion-checkbox ng-click="addField($index)" ng-change="saveValue(ticked,value,$index)" ng-model="ticked" 
          ng-disabled="!value" style="border: none;padding-left: 30px;" class="checkbox-royal"></ion-checkbox> 
      </label> 
     </div> 
    </div> 
    <button type="submit" ng-show="showButton" class="button button-dark button-shadow pull-right" style="" ><i class="ion-ios-arrow-forward"></i></button> 
    </form> 

這裏是控制器：

$scope.showButton = false; 
    $scope.inputs = [{value:''}]; 
    var checkedValues =[]; 
    $scope.addField = function (index) { 
     if($scope.inputs.length <= index+1 && $scope.inputs.length<10){ 
        $scope.inputs.splice(index+1,0,name); 
     } 
    } 
    $scope.saveValue = function (ticked,item,index) { 

    if(ticked){ 
     console.log('index'+index); 
     if(index>0) $scope.showButton =true; 
     checkedValues.splice(index,0,item); 
     console.log(checkedValues); 
    }else{ 
     checkedValues.splice(index,1); 
     console.log(checkedValues); 
    } 

    } 
    $scope.submitValues = function(){ 
    console.log($scope.value); 
    } 

Answer 1

由於輸入和複選框是一個ng-repeat指令內部，ng-model值需要是item迭代器的屬性。

<form id="valueForm" ng-submit="submitValues()"> 
    <div ng-repeat="item in inputs track by $index"> 
     <!-- REMOVE 
     <input type="text" ng-model="value" ng-disabled="ticked"> 
     <ion-checkbox ng-model="ticked"> </ion-checkbox> 
     --> 
     <!-- INSTEAD --> 
     <input type="text" ng-model="item.value" 
       ng-disabled="item.ticked"> 
     <ion-checkbox ng-model="item.ticked"> </ion-checkbox> 
    </div> 
    <button type="submit" ng-show="showButton"> 
     <i class="ion-ios-arrow-forward"></i> 
    </button> 
</form> 

ng-repeat指令爲每個項目創建一個子範圍。使用沒有「點」的值會將值放在每個子範圍上。因此規則：「在ng模型中始終使用'點'」。

欲瞭解更多信息，請參閱AngularJS Wiki -- The Nuances of Prototypical Inheritance

---

UPDATE

要查看提交輸入：

$scope.submitValues = function(){ 
    //console.log($scope.value); 
    console.log($scope.inputs); 
    }