Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

I'm learning angularjs so please bare with me.

I have an add button that uses a directive to add-to a table's (.estimates) tbody:

function EstimateCtrl( $scope, $compile ) {

    $scope.services = [
            { 'value': 'c', 'name': 'Standard Courier' },
            { 'value': 'xc', 'name': 'Express Courier' },
            { 'value': 'cc', 'name': 'Country Courier' }
    ]

    $scope.add = function() {

        angular.element('.estimates tbody').append( $compile('<tr estimate></tr>')($scope) );

    }

}

angular.module('dashboard', [])
    .directive('estimate', function() {

        return {

            restrict: 'A',
            template: '<td><input type="text" placeholder="Suburb"/></td><td><select ng-model="estimate.service" ng-options="service.value as service.name for service in services" class="form-control"></select></td><td>$0.00</td><td><button type="button" class="remove">x</button></td>',
            link: function( scope, element, attrs ) {

                element.find('.remove').bind('click', function() {

                    element.closest('tr').remove();

                });

            }

        }

    });

How can I have an element array using ng-model in angularjs? For example:

<select name="foo[]"></select>

to

<select ng-model="foo[]"></select>

I've been digging around for a day and half but I can't seem to catch a break. I was hoping that maybe someone can point me in the right direction. Thank you very much for any help.

Edit: Here is the link to the plunker I'm sure after seeing this everyone is going know what I'm on about: http://plnkr.co/edit/JlYB9P0vyAqghOmeNYh4

Edit2: Let's see if I can give you all another example to show you what I'm after

<form method="POST" action="">

<!-- I was attempting to do ng-model="estimate.service[]" but of course this doesn't work -->
<select name="estimate[service][]">
    <option value="foor">Foo</option>
    <option value="bar">Bar</option>
</select>
<select name="estimate[service][]">
    <option value="foor">Foo</option>
    <option value="bar">Bar</option>
</select>
<select name="estimate[service][]">
    <option value="foor">Foo</option>
    <option value="bar">Bar</option>
</select>

<input type="submit" value="Submit"/>

</form>

<?php

if ( $_POST )
{

    print_r( $_POST['estimate']['service'] );

}

?>

Output

enter image description here

share|improve this question
 
First off As I know you can't use []. Second, why do you try to use it with braces? –  Maxim Shoustin Sep 15 at 9:13
 
Could you create a fiddle or a plunker? –  CodeHater Sep 15 at 9:26
 
Check out my complete solution and tell me if understood your problem correctly –  mrangry777 Sep 15 at 13:06
 
Ok, I think I get what you're trying to achieve try the second edit :) –  mrangry777 Sep 16 at 14:02
add comment

3 Answers

up vote 0 down vote

I think what you need is multiple selection. With normal drop down list, you can only select one element at a time.

<select ng-model="selectedService" multiple ng-options="..." ></select>

DEMO

share|improve this answer
add comment
up vote 0 down vote

EDITED:

Ok lets say you have two arrays of configurable options:

options1=[...]
options2=[...]

Now if I understand correctly you want a select box that enables yout to select one set of them right? So first you need to enclose both of them in another array or as mentioned before another object.

So lets use an object (I can provide an array example as well) 

var $scope.myOptions ={'LabelForOptions1' : options1, 'LabelForOptions2' : options2}

Next we need a place to store the options that were choosen

 $scope.selectedOptions = {};

and lastly the select box itself

<select ng-model="selectedOptions" ng-options="value as key for (key,value) in myOptions"></select>

Note that the options1 and options2 variable could be also a single value and the example would still work

COMPLETE SOLUTION TO PROBLEM: I assume this is your model:

function MyController($scope) {
    $scope.options1 = ['Foo1','Bar1'];
    $scope.options2 = ['Foo2','Bar2'];
    $scope.options3 = ['Foo3','Bar3'];
    $scope.allOptions = [$scope.options1, $scope.options2, $scope.options3];
    $scope.selectedOptions = ["none","none","none"];
};

So this would be the solution:

<!DOCTYPE html>
<html ng-app>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
    <script src="./js/myAngular.js"></script>
</head>
<body ng-controller="MyController">
<div><select ng-repeat="option_set in allOptions"ng-model="selectedOptions[$index]" ng-options="value for value in option_set">
</select></div>
</body>
</html>

Working example: http://jsfiddle.net/qGRQF/11/

share|improve this answer
 
Think in terms of when you have several options but you want to have all their values under the same name so you use an element array option[] or <input type="text" name="option[]"/> so when you do something like print_r( $_POST['option'] ) you are given all the options that had been entered. I'm horrible at explaining something so if it doesn't make any sense let me know and I'll try and re-phrase. –  adamj Sep 15 at 12:47
add comment
up vote 0 down vote accepted

Ohrighty! I managed to find a work around.

I have abandoned directives and did it another way, here is my working code:

HTML:

<div ng-controller="Ctrl">
    <table>
        <tbody ng-repeat="service in estimate.services">
            <tr>
                <td><input type="text" placeholder="Suburb"/></td>
                <td>
                    <select ng-model="estimate.services[service.name]" ng-options="option.value as option.name for option in options" class="form-control"></select>
                </td>
                <td>$0.00</td>
                <td><button type="button" class="remove">x</button></td>
            </tr>
        </tbody>
    </table>
</div>

JavaScript:

function Ctrl( $scope, $compile ) {

    $scope.estimate.services = [
        { name: 'service1', value: '' }
    ];

    $scope.options = [
        { name: 'Option 1', value: 'opt1' },
        { name: 'Option 2', value: 'opt2' },
        { name: 'Option 3', value: 'opt3' }
    ];

    $scope.add = function() {

        $scope.estimate.services.push({
            name: 'service' + ($scope.estimate.services.length + 1),
            value: ''
        });

    };

}
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.