Question

我正在使用角度ng-repeat来添加可用于提供输入的输入值集。我如何动态添加是我正在采取一个对象并推入ng-repeat变量。在html中，对象中的每个键都有一个输入字段

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

我添加的大部分输入都是下拉列表。问题是如果我选择一个下拉值然后再次选择选择选项，那么对应于下拉列表的键将从对象中删除如何删除密钥？提前感谢

Answer 1

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

Answer 2

需要澄清一下：

此flowchart.addconditionrow()正在执行的位置？
当您将单个对象推送到$scope.conditionslv数组时，为什么要使用ng-repeat？您可以直接将对象属性分配到ng-model。

<强>样本

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>

Answer 3

这可能有帮助..

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: