javascript - Angularjs 中带有复选框的动态表单字段

Question

我想使用 ng-submit 将输入字段的值提交到 Controller ，但当我控制台输入模型时，它显示未定义。每个输入值都使用复选框保存。但我想检查是否有任何复选框未选中。 这是 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>

这是 Controller :

 $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-model 中始终使用‘点’”。

有关详细信息，请参阅AngularJS Wiki -- The Nuances of Prototypical Inheritance

<小时/>

更新

要查看提交时的输入:

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