Directives inside ng-repeat to create a new structure with AngularJS

Question

I'm trying to create a new array from an exiting array of parameters with 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:

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

you want to take input from user and construct your end array. isn't it? — Alhuck
– Alhuck, Commented May 28, 2015 at 3:16

Alhuck · Accepted Answer · 2015-05-30 08:16:52Z

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.

Take a look at the code,

<html ng-app="myApp">

<head>
<script data-require="[email protected]" 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!

Hi! , your answer helped me. My idea was only one generation. but I can adapt your example:) Thank you!

Collectives™ on Stack Overflow

Directives inside ng-repeat to create a new structure with AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related