當我使用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時，對象中的鍵被刪除

回答

相關問題