当我使用ng-repeat时，对象中的键被删除

我正在使用角度ng-repeat来添加可用于给出输入的一组输入值。我如何动态添加是我正在采取一个对象，并推入ng重复变量。在html对象中的每个键具有输入字段当我使用ng-repeat时，对象中的键被删除

的javascript

(function() { 
'use strict'; 

angular.module('myFirstApp', []) 

.controller('MyFirstController', function ($scope) { 
var flowchart=this; 
    $scope.conditionslv = []; 
    flowchart.field1dropdown = [{"FieldName":"","DisplayName":"select"},{"FieldName":"se","DisplayName":"se"},{"qw":"","DisplayName":"qw"}] 
    flowchart.operatordropdown = [{"OperatorTypeId":'',"OperatorTypeName":"select","WFSubConditions":[]},{"OperatorTypeId":1,"OperatorTypeName":"Greater Than","WFSubConditions":[]}] 
    flowchart.addconditionrow = function() { 
     $scope.conditionslv.push({ 
      expression1: '', operatortypeid: '', expressionvalue: "", expression2value: "", comments: "" 
     }); 
     console.log(JSON.stringify($scope.conditionslv)); 


    } 
     flowchart.cancelConditons = function() { 

     flowchart.diagramshow = true; 
     flowchart.conditions = false; 


    } 
    flowchart.saveconditions=function(){ 

    } 



}); 


})();

HTML

  <table> 
       <th>Field-1</th> 

       <th>Operator</th> 
       <th>Field-2</th> 
       <th>Comments</th> 

       <tbody> 

        <tr ng-repeat="i in conditionslv"> 
         <td>{{i}}</td> 

         <td> 
          <select ng-model="i.expression1" required> 
           <option ng-repeat="item in fc.field1dropdown" value="{{item.FieldName}}">{{item.DisplayName}}</option> 
          </select> 
         </td> 
         <td> 
          <select ng-model="i.operatortypeid" ng-required="true" ng-options="item.OperatorTypeId as item.OperatorTypeName for item in fc.operatordropdown" ></select> 
         </td> 
         <td> 
          <input type="text" ng-model="i.expressionvalue" ng-disabled="i.expression2value!=''||i.operatortypeid>5" >/<select ng-model="i.expression2value" ng-disabled="i.expressionvalue!=''||i.operatortypeid>5" required> 
           <option ng-repeat="item in fc.field1dropdown" value="{{item.FieldName}}">{{item.DisplayName}}</option> 
          </select> 



         </td> 
         <td> 
          <textarea rows="1" cols="40" ng-model="i.comments"></textarea><span ng-click="conditionslv.splice($index,1)" 
                           ng-if="conditionslv.length>1"><span class="k-icon k-font-icon k-i-x"></span></span> 
         </td> 
        </tr> 

       </tbody> 

      </table>

大多认为我加入输入是下拉菜单。的问题是，如果我选择一个下拉列表值，然后再选择提前选择选项，则对应于下拉菜单中的关键是让从物体如何关键是让删除吗？感谢去除

来源

2017-04-20 krishna

这可能有帮助..

(function() { 
 
'use strict'; 
 

 
angular.module('myFirstApp', []) 
 

 
.controller('MyFirstController', function ($scope) { 
 
var flowchart=this; 
 
    flowchart.conditionslv = [{expression1: '', operatortypeid: '', expressionvalue: "", expression2value: "", comments: "" 
 
     }]; 
 
    flowchart.field1dropdown = [{"FieldName":"ff","DisplayName":"select"},{"FieldName":"se","DisplayName":"se"},{"qw":"","DisplayName":"qw"}] 
 
    flowchart.operatordropdown = [{"OperatorTypeId":'',"OperatorTypeName":"select","WFSubConditions":[]},{"OperatorTypeId":1,"OperatorTypeName":"Greater Than","WFSubConditions":[]}] 
 
    flowchart.addconditionrow = function (valid) { 
 
    if(valid){ 
 
     flowchart.conditionslv.push({ 
 
      expression1: '', operatortypeid: '', expressionvalue: "", expression2value: "", comments: "" 
 
     }); 
 
     } console.log(valid); 
 

 

 
    } 
 
     flowchart.cancelConditons = function() { 
 

 
     flowchart.diagramshow = true; 
 
     flowchart.conditions = false; 
 

 

 
    } 
 
    flowchart.saveconditions=function(){ 
 

 
    } 
 

 
}); 
 

 

 
})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<body ng-app="myFirstApp" ng-controller="MyFirstController as ctrl"> 
 
<form name="addForm" novalidate> 
 

 
<button ng-click="ctrl.addconditionrow(addForm.$valid)" ng-disabled="addForm.$invalid">Add row</button> 
 
<table> 
 
       <th>Field-1</th> 
 

 
       <th>Operator</th> 
 
       <th>Field-2</th> 
 
       <th>Comments</th> 
 

 
       <tbody> 
 

 
        <tr ng-repeat="i in ctrl.conditionslv"> 
 
         <td>{{i.expression1}}{{i.operatortypeid}}{{i.expressionvalue}}{{i.expression2value}}{{i.comments}}</td> 
 

 
         <td> 
 
          <select ng-model="i.expression1" name="expre" required> 
 
<option ng-repeat="item in ctrl.field1dropdown" value="{{item.FieldName}}">{{item.DisplayName}}</option> 
 
          </select> 
 
         </td> 
 
         <td> 
 
          <select ng-model="i.operatortypeid" ng-required="true" ng-options="item.OperatorTypeId as item.OperatorTypeName for item in ctrl.operatordropdown" ></select> 
 
         </td> 
 
         <td> 
 
<input type="text" ng-model="i.expressionvalue" ng-disabled="i.expression2value!=''||i.operatortypeid>5" >/<select ng-model="i.expression2value" ng-disabled="" ng-required="i.expressionvalue!=''||i.operatortypeid>5 && i.expression2value==''"> 
 
<option ng-repeat="item in ctrl.field1dropdown" value="{{item.FieldName}}">{{item.DisplayName}}</option> 
 
          </select> 
 

 

 

 
         </td> 
 
         <td> 
 
          <textarea style="width:100px" rows="1" cols="40" ng-model="i.comments" name="comment" required></textarea> 
 
<span ng-click="ctrl.conditionslv.splice($index,1)" ng-if="ctrl.conditionslv.length>1"> 
 
<span class="k-icon k-font-icon k-i-x"></span></span> 
 
         </td> 
 
        </tr> 
 

 
       </tbody> 
 

 
      </table> 
 
      </form> 
 
      </body>

来源

2017-04-20 10:28:22

嘿感谢您的建议..我需要验证提交然后我怎么可以验证...它需要像其他选择的选项 – krishna

我被做了小改变..只是检查我的演示 –

请参阅此http://stackoverflow.com/questions/12044277/how- to-validate-inputs-dynamic-created-using-ng-repeat-ng-show-angular –

工作jsfiddle

HTML

<table ng-controller="MyFirstController as fc"> 
    <thead> 
    <th>Field-1</th> 
    <th>Operator</th> 
    <th>Field-2</th> 
    <th>Comments</th> 
    </thead> 
    <tbody> 
    <tr ng-repeat="i in conditionslv"> 
     <td> 
     <select ng-model="i.expression1" required> 
      <option ng-repeat="item in fc.field1dropdown" value="{{item.FieldName}}">{{item.DisplayName}}</option> 
     </select> 
     </td> 
     <td> 
     <select ng-model="i.operatortypeid" ng-required="true" ng-options="item.OperatorTypeId as item.OperatorTypeName for item in fc.operatordropdown"></select> 
     </td> 
     <td> 
     <input type="text" ng-model="i.expressionvalue" ng-disabled="i.expression2value!=''||i.operatortypeid>5">/ 
     <select ng-model="i.expression2value" ng-disabled="i.expressionvalue!=''||i.operatortypeid>5" required> 
      <option ng-repeat="item in fc.field1dropdown" value="{{item.FieldName}}">{{item.DisplayName}}</option> 
     </select> 
     </td> 
     <td> 
     <textarea rows="1" cols="40" ng-model="i.comments"></textarea><span ng-click="conditionslv.splice($index,1)" ng-if="conditionslv.length>1"><span class="k-icon k-font-icon k-i-x"></span></span> 
     </td> 
    </tr>  
    </tbody>  
</table>

控制器

angular.module('myFirstApp', []) 

.controller('MyFirstController', function($scope) { 
    var flowchart = this; 
    $scope.conditionslv = []; 

    flowchart.field1dropdown = [{ 
    "FieldName": "", 
    "DisplayName": "select" 
    }, { 
    "FieldName": "se", 
    "DisplayName": "se" 
    }, { 
    "qw": "", 
    "DisplayName": "qw" 
    }]; 

    flowchart.operatordropdown = [{ 
    "OperatorTypeId": '', 
    "OperatorTypeName": "select", 
    "WFSubConditions": [] 
    }, { 
    "OperatorTypeId": 1, 
    "OperatorTypeName": "Greater Than", 
    "WFSubConditions": [] 
    }]; 

    flowchart.addconditionrow = function() { 
    $scope.conditionslv.push({ 
     expression1: '', 
     operatortypeid: '', 
     expressionvalue: "", 
     expression2value: "", 
     comments: "" 
    }); 
    console.log(JSON.stringify($scope.conditionslv)); 
    } 

    flowchart.cancelConditons = function() { 
    flowchart.diagramshow = true; 
    flowchart.conditions = false; 
    } 

    flowchart.saveconditions = function() { 

    } 
    flowchart.addconditionrow(); 
});

来源

2017-04-20 10:01:11 Gaurav

https://jsfiddle.net/kn1x3758/1/ – krishna

gaurav请检查上面的小提琴我强制添加对象..你可以清楚地看到从对象中删除的变量。 – krishna

来自哪个对象的哪个变量？ – Gaurav

需要一些澄清：

从哪里该flowchart.addconditionrow()正在执行？
当你将单个对象推入$scope.conditionslv数组时，为什么你使用ng-repeat？您可以直接将对象属性分配到ng-model。

DEMO

angular.module('myApp', []) 
 

 
.controller('MainController', function($scope) { 
 
    var flowchart = this; 
 
    $scope.conditionslv = []; 
 
    flowchart.field1dropdown = [{ 
 
    "FieldName": "", 
 
    "DisplayName": "select" 
 
    }, { 
 
    "FieldName": "se", 
 
    "DisplayName": "se" 
 
    }, { 
 
    "qw": "", 
 
    "DisplayName": "qw" 
 
    }] 
 
    flowchart.operatordropdown = [{ 
 
    "OperatorTypeId": '', 
 
    "OperatorTypeName": "select", 
 
    "WFSubConditions": [] 
 
    }, { 
 
    "OperatorTypeId": 1, 
 
    "OperatorTypeName": "Greater Than", 
 
    "WFSubConditions": [] 
 
    }] 
 
    flowchart.addconditionrow = function() { 
 
    $scope.conditionslv.push({ 
 
     expression1: '', 
 
     operatortypeid: '', 
 
     expressionvalue: "", 
 
     expression2value: "", 
 
     comments: "" 
 
    }); 
 
    } 
 
    flowchart.addconditionrow(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="MainController as fc"> 
 
    <table> 
 
       <th>Field-1</th> 
 

 
       <th>Operator</th> 
 
       <th>Field-2</th> 
 
       <th>Comments</th> 
 

 
       <tbody> 
 

 
        <tr ng-repeat="i in conditionslv"> 
 
         <td> 
 
          <select ng-model="i.expression1" required> 
 
           <option ng-repeat="item in fc.field1dropdown" value="{{item.FieldName}}">{{item.DisplayName}}</option> 
 
          </select> 
 
         </td> 
 
         <td> 
 
          <select ng-model="i.operatortypeid" ng-required="true" ng-options="item.OperatorTypeId as item.OperatorTypeName for item in fc.operatordropdown" ></select> 
 
         </td> 
 
         <td> 
 
          <input type="text" ng-model="i.expressionvalue" ng-disabled="i.expression2value!=''||i.operatortypeid>5" >/<select ng-model="i.expression2value" ng-disabled="i.expressionvalue!=''||i.operatortypeid>5" required> 
 
           <option ng-repeat="item in fc.field1dropdown" value="{{item.FieldName}}">{{item.DisplayName}}</option> 
 
          </select> 
 

 

 

 
         </td> 
 
         <td> 
 
          <textarea rows="1" cols="40" ng-model="i.comments"></textarea><span ng-click="conditionslv.splice($index,1)" 
 
                           ng-if="conditionslv.length>1"><span class="k-icon k-font-icon k-i-x"></span></span> 
 
         </td> 
 
        </tr> 
 

 
       </tbody> 
 

 
      </table> 
 
      <div>

来源

2017-04-20 10:14:13

hi rohit有可用于调用方法的用户界面中的按钮..... – krishna

当我使用ng-repeat时，对象中的键被删除

回答

相关问题