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.