ng-repeat multiple values

0

Suppose I have:

Columns is an array of an object Column = {name, tipo}

<div ng-repeat="column in columns"> => esto iterara 4 veces por ejm:
 <input type="checkbox" ng-model=""/>
 <select>
        <option value="mayor">Mayor que</option>
        <option value="menor">Menor que</option>
 </select>
 <input type="text" ng-model=""/>
</div>
<input type="button" ng-click="getValues()" />

How could I get the values only those that the check are marked ?, that is, if it is repeated 4 times and I have marked check only the second and fourth and have its value of check ,% select and of text of each ?, is it possible?

    
asked by sirdaiz 21.12.2016 в 13:36
source

3 answers

0

I have modified it next, I added the array to the controller, and tb the each:

<div ng-repeat="column in columns"> => esto iterara 4 veces por ejm:
 <input type="checkbox" value="{{column.field}}" ng-value="column.field" 
 ng-model="modelo_dinamico[column.type]"/>
 <select>
    <option value="mayor">Mayor que</option>
    <option value="menor">Menor que</option>
 </select>
 <input type="text" ng-model=""/>
</div>
<input type="button" ng-click="getValues()" />

and in the index.html I have:

Show values: {{dynamic_model}} = > result: "[]", if I call the function getValues, it does not seem like anything to me.

But I do not only want the value of the checkbox, but also that the select and the input text will be associated.

So, to make it work, I had to do this:

$ scope.modelo_dinamico = {};

<input type="checkbox" value="{{column.field}}" ng-value="column.field" ng-model="modelo_dinamico[column.field].check"/>
<input type="text" ng-model="modelo_dinamico[column.field].text"/>

and this already gives me:

dynamic_model: {"id": {"check": true}, "name": {"check": true, "select": "major", "text": "66"}, "price": {"check": true, "text": "77", "select": "minor"}, "quantity": {"check": false}}

    
answered by 21.12.2016 / 14:57
source
0

perhaps making an array with objects eg:

var list=[ {id:0,name:'mayor'}, {id:1,name:'medio mayor'}, {id:2,name:'medio menor'}, {id:3,name:'menor'} ];

then:

<div ng-repeat="l in list"> <input type="checkbox" ng-model=""/> <select> <option value="l.id">{{l.name}}</option> </select> <input type="text" ng-model=""/> </div> <input type="button" ng-click="getValues()" />

Then to the button you give a function to check the check boxes that are checked.

I also leave this link that do something similar but much more beautiful:

link

    
answered by 21.12.2016 в 13:53
0

currently in angularjs is not supported the ng-models dynamics (as is your case) what I recommend you do is in your controller define an empty array:

$scope.modelo_dinamico = [];

Go through your array of Column objects

angular.forEach($scope.columns, function(columna, index){
    $scope.modelo_dinamico[columna.tipo] = "";
})

Giving the empty array that we declare index that are unique since they are equal to the id of your columns, if you print this value it would be

tipo_1 : "",
tipo_2 : "",
tipo_3 : ""

Assuming the types are type_1, type_2, and type_3.

In the view you simply give your controls these ng-model

<div ng-repeat="column in columns"> => esto iterara 4 veces por ejm:
    <input type="checkbox" ng-model="modelo_dinamico[column.tipo]" />
    <select>
        <option value="mayor">Mayor que</option>
        <option value="menor">Menor que</option>
    </select>
    <input type="text" ng-model="" />
</div>
<input type="button" ng-click="getValues()" />

And to get the value of all the checkboxs but see which ones were checked or you can not:

$scope.getValues = function(){
   console.log($scope.modelo_dinamico);
}

This will return:

tipo_1 : false,
tipo_2 : true,
tipo_3 : true

EDITING

As in this case there are more inputs that should take dynamic models could be like this:

$scope.modelo_dinamico = [];
$scope.objeto = {'tipo' : '', checkbox : '' , select : '', input : ''};
angular.forEach($scope.columns, function(columna, index){
     $scope.objeto.tipo = columna.tipo;
     $scope.objeto.checkbox = true;
     $scope.objeto.select = "menor";
     $scope.objeto.input = "Hola";
     $scope.modelo_dinamico[index] = $scope.objeto;
     $scope.objeto = {};
});

What do I do here? Apart from defining an empty array, I define ONE TYPE OF OBJECT that contains all the inputs that I want to add dynamically. In this case a <checkbox> , <select> and% <input> . Why the value of index? , Simple, I saw in your example that for each data you modify, an object is added {} with the values previously edited, with index an object is created unique for each element that is repeated (with your format)

I go through the arrangement and give it default values (they could be empty if you want it) And in the view I show them like this:

<div ng-repeat="column in columns">
    <input type="checkbox" ng-model="modelo_dinamico[$index].checkbox" />
    <select ng-model="modelo_dinamico[$index].select">
        <option value="mayor">Mayor que</option>
        <option value="menor">Menor que</option>
    </select>
    <input type="text" ng-model="modelo_dinamico[$index].input" />
</div>
<input type="button" ng-click="getValues()" />
</body>

The function getValues()

$scope.getValues = function(){
   console.log($scope.modelo_dinamico);
}

This will print:

Array[4] :
   0 : Object
      checkbox : true,
      input : "Hola",
      select : "menor",
      tipo : "tipo_1"
   1 : Object
      checkbox : false,
      input : "Texto de cambio",
      select : "mayor",
      tipo : "tipo_2"
   2 : Object
      checkbox : false,
      input : "Texto de cambio 2",
      select : "menor",
      tipo : "tipo_3"
   3 : Object
      checkbox : true,
      input : "Sin texto",
      select : "menor",
      tipo : "tipo_4"

angular.module('mySuperApp', [])
.controller('PopupCtrl',function($scope) {
  $scope.columns = [
      {name : 'Columna 1', tipo : 'tipo_1'},
      {name : 'Columna 2', tipo : 'tipo_2'},
      {name : 'Columna 3', tipo : 'tipo_3'},
      {name : 'Columna 4', tipo : 'tipo_4'}
  ];
  
  $scope.modelo_dinamico = [];
  $scope.objeto = {'tipo' : '', checkbox : '' , select : '', input : ''};
  angular.forEach($scope.columns, function(columna, index){
     $scope.objeto.tipo = columna.tipo;
     $scope.objeto.checkbox = true;
     $scope.objeto.select = "menor";
     $scope.objeto.input = "Hola";
     $scope.modelo_dinamico[index] = $scope.objeto;
     $scope.objeto = {};
  });
  
  $scope.getValues = function(){
    console.log($scope.modelo_dinamico);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="mySuperApp">
  <head>
    <meta charset="utf-8">
    <title>
      Popups
    </title>
    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
    
  </head>
  <body class="padding" ng-controller="PopupCtrl">
   <div ng-repeat="column in columns">
   <input type="checkbox" ng-model="modelo_dinamico[$index].checkbox"/>
   <select ng-model="modelo_dinamico[$index].select">
          <option value="mayor">Mayor que</option>
          <option value="menor">Menor que</option>
   </select>
   <input type="text" ng-model="modelo_dinamico[$index].input"/>
  </div>
    <input type="button" ng-click="getValues()" /><br><br>
    {{modelo_dinamico | json}}
  </body>
</html>

I leave you a codepen so that you see it working.

    
answered by 21.12.2016 в 13:43