CODEWITHSUNDEEP
javascriptangularjs
duellsy
duellsy

Reputation: 8577

How to add data from scope to select box

I'm fairly new to angular, so hopefully this is a super simple question for someone to nail.

I have a form (cut down version below) that I want to be able to have a live preview being shown as the user fills in the form.

All was going well with standard fields, however I've hit a roadblock with <select> fields.

<div ng-app="jobcreate">
    <div class="row fullWidth" ng-contoller="JobCtrl">

        <div class="medium-6 columns">

            <form method="POST" action="http://localhost:3030/job/create" accept-charset="UTF-8">

                <label for="title">Enter a title</label>
                <input placeholder="title" id="title" required="required" ng-model="job.title" name="title" type="text" />

                <br />
                <label for="title">Pick template</label> 
                <select ng-model="job.template" ng-options="template.Name for template in templates" name="template"></select>

            </form>     

        </div>

        <div class="medium-6 columns">

            <div class='job-detail {{ job.template || "default" }}'>
                <h2>{{ job.title || "Enter a title"}}</h2>
                <h2>{{ job.template || "Pick a template"}}</h2>
                <pre>Templates: {{templates | json}}</pre>

            </div>

        </div>
    </div>
</div>

And here is the js:

angular.module('jobcreate', []).controller('JobCtrl', function($scope) {
        $scope.templates = [
            {ID:'default', name:'Default'},
            {ID:'obnoxious', name:'Obnoxious'}
        ];

    });

I have a jsfiddle here so you can see it in action: http://jsfiddle.net/2m8jm/4/

As you can see, entering something in the title field works as intended, but I'm struggling to get the contents of the $scope.colors to fill in the select field

Upvotes: 0

Views: 79

Answers (1)

Lekhnath
Lekhnath

Reputation: 4625

In your fiddle : http://jsfiddle.net/2m8jm/4/, you have choosed templates as an data array for ng-options but there is not scope variable named templates in the controller JobCtrl. I have renamed $scope.colors to $scope.templates and modified the ng-options bit - ng-options="template.ID as template.name for template in templates".

Here is a working plunker : http://plnkr.co/edit/wsbxkjRqTEU2yfcHOV0D?p=preview

Update

Is there a way to not have the first empty value be in the select field?

Yes, Couple of ways.

1) Initialize job.template with some default value in your markup as : 

<label for="title" ng-init="job.template='obnoxious'">Pick template</label> 
<select ng-model="job.template" ng-options="template.ID as template.name for template in templates" name="template"></select>

2) Define controller as follows to set default value for job.template inside the controller : 

.controller('JobCtrl', function($scope) {
     // some other codes        

    $scope.job = {};
    $scope.job.template = 'default';  
});

Upvotes: 1

Related Questions