Access element inside templateUrl from controller - AngularJS

Question

I need to populate select(option) element inside template html file from controller. I could do it successfully, but can't give default value(to avoid the first empty option)

template.html file

...
<select name="drill_down" id="drill_down" ng-model="drill_down"
ng-options="item.value for item in items"></select>
...

controller.js file

(function () {
    'use strict';

var app = angular.module('appname', []);

app.config(function($stateProvider) {
    $stateProvider
        .state('appname', {
            url: '/appname',
            templateUrl: '/appname/template.html',
            controller: 'AppCtrl'
        });
});

app.controller('AppCtrl', AppCtrl);

function AppCtrl($scope, MyService) {
    $scope.college_majors_full = [];
    $scope.job_title_functions = [];

    MyService.getData().then(function(rows) {
        $scope.items = rows;   // this works - populates select options

        $scope.drill_down = $scope.items[0].value;  // this doesn't work
    });
...

Any help? Thanks.

Anik Islam Abhi · Accepted Answer · 2015-08-21 16:24:02Z

1

Your options has only text property of your items

You are assigning value instead of id

Try like this

$scope.drill_down = $scope.items[0].value;

Or you can create value text type in option

Try like this

View

<select name="drill_down" id="drill_down" ng-model="drill_down"
ng-options="item.id as item.value for item in items"></select>

Controller

$scope.drill_down = $scope.items[0].id;

answered Aug 21, 2015 at 16:24

Anik Islam Abhi

25.4k8 gold badges61 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Alex Over a year ago

Thanks for your help! It works. But now it selects the last option as default. Even I select another option, only the last option is selected always.

Anik Islam Abhi Over a year ago

can you provide a fiddle ?

Alex Over a year ago

I solved it myself. The issue was that I didn't write data structure correctly. JSON data structure: items = [{name:'xxx', value:'first'}, ...] But I used ... ng-options="item.id as item.value for item in items... I should write name instead of id Thanks!!

Community · Accepted Answer · 2017-05-23 11:51:20Z

0

You should be able to set a default value via ngModel. See this answer about setting a default value for ngOption:

var app = angular.module('optionsApp', []);

app.controller('optionsCtrl', function($scope) {
  $scope.prop = {
    "type": "select",
    "name": "Service",
    "value": "Service 3",
    "values": ["Service 1", "Service 2", "Service 3", "Service 4"]
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="optionsApp">

  <div ng-controller="optionsCtrl">
    <select ng-model="prop.value" ng-options="v for v in prop.values"></select>
  </div>

</div>

edited May 23, 2017 at 11:51

CommunityBot

11 silver badge

answered Aug 21, 2015 at 16:31

Ken Bellows

7,01014 gold badges54 silver badges80 bronze badges

Collectives™ on Stack Overflow

Access element inside templateUrl from controller - AngularJS

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related