ng-repeat中的指令用AngularJS创建一个新结构

I'm trying to create a new array from an exiting array of parameters with AngularJS.

我正在尝试使用AngularJS从一系列参数创建一个新数组。

Explaining better: I have an array of parameters:

更好地解释:我有一系列参数:

"parameters": [
   {"id":2,"exibitionName":"gaps","name":"--gaps","description":"Nº de GAPS permitido","defaultValue":null},
   {"id":4,"exibitionName":"Block Size","name":"--block-size","description":"Tamanho dos blocos","defaultValue":null}
            ]

With this array I create with ng-repeat a set of inputs to take the respective value of each parameter from the user:

使用此数组,我使用ng-repeat创建一组输入,以从用户获取每个参数的相应值:

        <div class='row well well-sm' ng-show='selectedAlg'>
            <div class='col-md-3' ng-repeat='parameter in selectedAlg.parameters'>
                <label class="control-label">{{parameter.exibitionName}}</label>
                <input class="form-control input-sm" type="text">
            </div>
        </div>

In the end I want to have another array of parameters with this structure:

最后,我希望有另一个具有此结构的参数数组:

"parameters": [
                {paramName:"--threads", paramValue:"18"},
                {paramName:"--gaps", paramValue:"2"}
            ]

What directives I need to use in the input to take the value and build this new structure I want?

我需要在输入中使用哪些指令来获取值并构建我想要的新结构?

1 个解决方案

#1

I tried you requirement with ng-change directive in the input tag and kept one button to generate your end array when you click that button.

我在输入标签中尝试使用ng-change指令,并在单击该按钮时保留一个按钮来生成结束数组。

Take a look at the code,

看看代码,

<html ng-app="myApp">

<head>
<script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>

<body ng-controller="myController">
<div ng-show='selectedAlg'>
  <div ng-repeat="parameter in selectedAlg.parameters">
    <label>{{parameter.exibitionName}}</label>
    <input id="{{$index}}" ng-model="val" type="text" ng-change="insertArray = $index==selectedAlg.parameters.length-1?true:false; 
    setParamvalues(val, insertArray)"></input>
  </div>
  <button type="button" ng-click="constructArray();">Construct Array</button>{{endArray}}
</div>
</body>
</html>

Here is the controller,

这是控制器,

var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.endArray = [];
$scope.selectedAlg = {
"parameters": [
    {
        "id": 2,
        "exibitionName": "gaps",
        "name": "--gaps",
        "description": "Nº de GAPS permitido",
        "defaultValue": null
    },
    {
        "id": 4,
        "exibitionName": "Block Size",
        "name": "--block-size",
        "description": "Tamanho dos blocos",
        "defaultValue": null
    }
]
};
 $scope.setParamvalues = function(values, insertArray) {
  if(!insertArray) {
    $scope.paramName = values;
  }
  if(insertArray) {
   $scope.paramValue = values;
  }
 }

 $scope.constructArray = function() {
  $scope.endArray.push({
    paramName:  $scope.paramName,
    paramValue: $scope.paramValue
  });
 }
});

Working plunker

Hope this helps!

希望这可以帮助!

#1