Question

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

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

"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}
            ]

使用此数组，我使用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>

最后我想要另一个具有这种结构的参数数组：

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

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

Answer 1

我在ng-change中尝试使用input tag指令，并在单击该按钮时保留一个按钮来生成结束数组。

看看代码，

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

这是控制器，

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

希望这有帮助！

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

1 个答案: