Keys in object are getting removed when i am using ng-repeat

Question

i am using angular ng-repeat to add the set of input values which can be used to give the input. how i am adding dynamically is i am taking an object and pushing into the ng-repeat variable. In the html each key in the object has a input field

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>

most of the inputs that i am adding are the dropdowns. the problem is if i select a dropdown value and then again selecting the select option then the key corresponding to the dropdown is getting removed from the object how the key is getting removed?thanks in advance

score 0 · Answer 1 · answered Apr 20 '17 at 10:01

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

Controller

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

gaurav please check the above fiddle i jus added the object..you can clearly see the variable getting deleted from the object. — krishna, Apr 21 '17 at 12:55
can you please check the fiddle change the first dropdown to option and then to select.you can see the object in the first row..you can observe the values removing — krishna, Apr 24 '17 at 06:35
U need to define `FieldName` property for all object in `field1dropdown` Array, blank string as a value will remove key from object. check working [jsfiddle](https://jsfiddle.net/kn1x3758/2/) — Gaurav Kumar Singh, Apr 24 '17 at 09:11

score 0 · Answer 2 · answered Apr 20 '17 at 10:14

Need some clarifications :

From where this flowchart.addconditionrow() is executing ?
As you are pushing the single object into $scope.conditionslv array then why are you using ng-repeat ?. you can directly assign object property into the 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>

hi rohit there is button in the ui that can be used to call the method..... — krishna, Apr 21 '17 at 12:47

Manikandan Velayutham · Accepted Answer · 2017-04-21T13:28:37.433

This may helpful..

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

hey thanks for the suggestion..if i need validations on submit then how can i validate...it jus takes like the other selected option — krishna, Apr 21 '17 at 12:51
refer this http://stackoverflow.com/questions/12044277/how-to-validate-inputs-dynamically-created-using-ng-repeat-ng-show-angular — Manikandan Velayutham, Apr 21 '17 at 13:30
http://stackoverflow.com/questions/23141935/angularjs-required-field-validation-in-ng-repeat — Manikandan Velayutham, Apr 21 '17 at 13:30
http://stackoverflow.com/questions/35738337/how-to-use-error-required-with-ng-repeat — Manikandan Velayutham, Apr 21 '17 at 13:31

Keys in object are getting removed when i am using ng-repeat

3 Answers3