I have an table made it with angular and a button. When I click on the button angular add me a new row where every column is a form field. The text, numeric and checkbox fields are displaying ok. The issue come's when I try to create a select option menu. I get the options for the select from a web service. And I don't find the way to create the select.
That's how I create the new row line when button is clicked:
assets.controller('AfegirTipusActiusCtrl', function ($scope, $http){
// Camps formulari text pla
$scope.nomAtribut = "<input type='text' name='firstname'>";
$scope.tipus = "<select><option value='volvo'>Volvo</option><option value='saab'>Saab</option><option value='mercedes'>Mercedes</option><option value='audi'>Audi</option></select>";
$scope.mida = "<input type='number' name='firstname'>";
$scope.prioritat = "<select><option value='1'>1</option><option value='2'>2</option></select>";
$scope.obligatori = "<input type='checkbox' name='vehicle' value='yes'>";
// Construeix combo
$http.get('http://10.0.203.73/WS/ws.php/getCombo/1/').success(function(data) {
var tipus_atributs = data;
});
// Bucle options select
$scope.atributs = [];
$scope.addField = function() {
$scope.atributs.push($scope.atributs.length);
};
});
I get the values frm the web service on // Bucle options select
For render the $scope.nomAtribut
and others I use this directive:
assets.directive('compile', compile);
function compile($compile)
{
return {
restrict: 'A',
replace: true,
link: linkFunction
};
function linkFunction(scope, element, attrs)
{
scope.$watch(
function (scope)
{
return scope.$eval(attrs.compile);
},
function (value)
{
element.html(value);
$compile(element.contents())(scope);
}
);
}
}
And that's the view:
<div class="row">
<div class="col-md-8" ng-controller="AfegirTipusActiusCtrl">
<button ng-click="addField()">Nou atribut</button>
<div>
<table class="table">
<tr>
<td>Nom atribut</td>
<td>Tipus</td>
<td>Mida</td>
<td>Prioritat</td>
<td>Obligatori</td>
</tr>
<tr ng-repeat="atribut in atributs">
<td compile="nomAtribut"></td>
<td compile="tipus"></td>
<td compile="mida"></td>
<td compile="prioritat"></td>
<td compile="obligatori"></td>
</tr>
</table>
</div>
</div>
</div>
</div>
It's my first try with angular, sorru by the inconvenience