0

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);
            }
        );
    }
}

As said here

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

Community
  • 1
  • 1
jcobo1
  • 1,065
  • 1
  • 18
  • 34
  • I think you're approaching angular too much from the jQuery side. For example, the select box is not bound to the controller's scope. Maybe the [docs](https://docs.angularjs.org/api/ng/directive/select) can help you get started. See also the documentation about [ng-option](https://docs.angularjs.org/api/ng/directive/ngOptions) – jao Feb 24 '16 at 15:23
  • @jao As far as I know. If I do run the button, select does not work .. i if I run the select then the button does not work – jcobo1 Feb 24 '16 at 15:32

0 Answers0