Develop Reference

Getting the selected string in the dropdown list in Angular

To begin with, I am an absolute beginner in front-end development, thus please excuse me if the question is too elementary.
The project I am working on, a drop-down list has been defined as:
<div ng-controller="FacetController">
<div class="spnlocationdrop-container" ng-hide="isservicelocal">
<select class="spnlocationdrop" ng-model="$parent.locationsearch" ng-options="location for location in locations | sortArray ">
<option value="">All Cities</option>
</select>
</div>
</div>
The list contains cities, out-of which the user has to select one. The value has to be stored, and sent to the backend via an AJAX call.
How do I get the selected value? Until now, I've been doing that using the document.getElementByID().value() function, but since the above list contains no ID, how do I get the value?

ng-model will have the value of the option selected.
Here's a simple working example: Plunker
In my example, data.singleSelect has the value you need so I'm able to output that to the view using {{ data.singleSelect }} though if I wanted to access it in my controller I would do var input = $scope.data.singleSelect and then pass that input variable to the backend via an AJAX call.

Angular 1.x: attribute of an object inside data-ng-repeat is set as a string, not an object

I'm trying to set a value of the option field as a JSON object inside another JSON object eg. catalogue inside attribute.catalogue. The problem is that it is saved as a String which looks like a JSON object.
I think this is somehow related to the limitation of the option value field. Can I somehow adjust my code, so that the value is stored as a JSON object and not as a String?
This is the code:
<div class="col-sm-3">
<select ng-model="attribute.catalogue" ng-change="showScope()">
<option data-ng-repeat="catalogue in catalogueObjects"
value="{{catalogue}}">{{catalogue.name}}</option>
</select>
</div>

In general html attribute's can only store string value. In angular world ng-options directive does provide an ability to use assign object when select option selected.
<select ng-model="attribute.catalogue" ng-change="showScope()"
data-ng-options="catalogue as catalogue.name for catalogue in catalogueObjects">
</select>
Reference
https://docs.angularjs.org/api/ng/directive/ngOptions

manipulate DOM after Blaze is done with rendering

In my meteor application I want to preload a select option list with values from my collection.
In my template I tried this, which works:
{{#each items}}
<p>
{{value}}
{{title}}
</p>
{{/each}}
The above code represents just an pre stage version of the actual code.
Then, I tried this:
<select id="category">
<option value="" disabled selected>Bitte wählen</option>
{{#each items}}
<option value="{{value}}" disabled selected>{{title}}</option>
{{/each}}
</select>
Unfortunately, it won't fill the list with any data.
I'm using materialize as UI framework, and what materialize would do is rendering the select option as a ul li unordered list instead of rendering the select option to make the user able to choose between the values. The select option list has to be initialized as follow:
$(document).ready(function() {
$('select').material_select();
});
Apparantely, $(document).ready() will be fired before blaze is done with rendering the contents. How can I force the material initialization to be run just after blaze is done adding the options to the select list?

What are you looking is the onRendered method
Template. category.onRendered(function(){
//manipulate DOM here
});
Sometimes you will need to use a timeout like this.
Template. category.onRendered(function(){
Meteor.setTimeout(function(){
//Manipulate DOM here
// this is most like a hack but it works some of the cases
},0);
});

Print child elements as ng-options of an AngularJS select

I am iterating through an array of food items and printing out a select for each one. I want to populate the options of the select from child elements of the array. I am trying to do it like this:
<div ng-controller="MyCtrl">
<div ng-repeat="food in foodlist"> {{food.name}}
<select ng-options="unit.title as unit in food.unit" ng-model="unit" ng-change="update()"></select>
{{unit.name}}
</div>
</div>
The foods look like this:
{code: 1, name: 'Yoghurt', "unit":[
{"title":"bottle",
"gram":"45",
"max":"100"
},
{"title":"cup",
"gram":"250",
"max":"12"}
]},
This prints out the title of each food fine, but prints nothing into the selects.
See JSFiddle
I guess that I am calling the child elements incorrectly. Can anyone tell me how to do this correctly?

You have an error in your ng-options. Try this:
<select ng-options="unit.title for unit in food.unit" ng-model="unit" ng-change="update()"></select>
Using 'as' in your expression will allow you to specify what is displayed as the text part of the option. You still need the 'for' part of the statement which is the variable crated for each item in the collection food.unit.
Hope this helps!

Use ng-options like: ng-options="unit.title as unit.title for unit in food.unit"
Also you can use ng-init to avoid empty combo on start:
HTML
<div ng-controller="MyCtrl">
<div ng-repeat="food in foodlist">{{food.name}}
<select
ng-options="unit.title as unit.title for unit in food.unit"
ng-model="unit"
ng-change="update()"
ng-init="unit = food.unit[0].title"
></select>{{unit.name}}</div>
</div>
Demo Fiddle

I populated my drop-down menu in this way.
<html>
<select ng-model="myModel" ng-options="direction for direction in directionOptions"></select>
<controller>
var Directions = ['UP', 'DOWN', 'LEFT', 'RIGHT'];
$scope.directionOptions= Directions;
You can specify what value you want displayed in the drop-down menu by editing the first 'direction' in the ng-options.

Empty first element in dropdown list

I am quite a beginner with AngularJS and currently I am working on a web application in Django where I use AngularJS for the frontend part i can say. My problem is that the dropdown list which is populated with objects from a scope always start with a blank element (if i select one from the list, the issue is gone). This create problems because if the user doesn't select anything the POST request normally it will not work anymore. I would like to know how to have something like a preselected value or something similar. Here's part of my code:
Select tag:
<select id="sel" class="input-block-level" ng-model="list_category">
<option ng-repeat="obj in list_categories.data" value="{{obj.id}}">{{obj.name}}</option>
<option value="Other">Other</option>
</select>
$scope.list_categories:
var listcategoryPromise = ListCategory.get();
listcategoryPromise.then(function(response) {
$scope.list_categories = {
meta : response.data.meta,
data : response.data.objects
};
});

Use the directive ng-options and remove the value from the 'Other' option, like this:
<select id="sel" class="input-block-level" ng-model="list_category" ng-options="obj.id as obj.name for obj in list_categories.data">
<option value="">Other</option>
</select>
This ensures that if list_category is empty (no entry selected), the 'Other' option is selected (by default).
jsFiddle: http://jsfiddle.net/bmleite/gkJve/

Find the below working example below you should avoid ng-repeat with options
so please see below sample code with
<body ng-controller="testcontroller">
<select ng-model="item" ng-options="item.ID as item.Title for item in items">
</select>
<span>{{item}}</span>
</body>
App.controller('testcontroller', function ($scope) {
$scope.item = '000001';
$scope.items = [
{ ID: '000001', Title: 'Chicago' },
{ ID: '000002', Title: 'New York' },
{ ID: '000003', Title: 'Washington' }
];
});

You can use a specific syntax for <select> tags with Angularjs.
Inspired from the documentation page:
<select id="sel" class="input-block-level" ng-model="list_category" ng-options="obj.name for obj in list_categories.data">
<option value="Other">Other</option>
</select>

Here's some code directly from the AngularJs.org website about select lists:
<select ng-model="color" ng-options="c.name for c in colors"></select>
First, as you can see, you don't need to use the ng-repeat to build your options list. Angular is going to basically let you do a foreach loop on a collection to build your option list. Second, you have the ng-model which is on the select, but isn't the same as your collections name. This is going to be your item which is actually collected at post time .
function MyCntrl($scope) {
$scope.colors = [
{name:'black', shade:'dark'},
{name:'white', shade:'light'},
{name:'red', shade:'dark'},
{name:'blue', shade:'dark'},
{name:'yellow', shade:'light'}
];
$scope.color = $scope.colors[2]; // red
}
Okay, and here's the javascript controller code. $scope.colors is the collection and $scope.color is the model property which has been assigned to the select list in the html. As you can see from this example the model property is being given a default starting value of the third option in the array. For you, this can be set from the http.get you're using for loading up your page initally.
Now when you're doing the foreach, you're basically grabbing the 'name' value from the collection and you're saying 'show this value' in the dropdown and use this value on the post. By having that inital model property set, you should be able to avoid having an empty option field in your drop down list.
Reference: AngularJS Select

in my opinion this answer is cleaner:
$scope.form = {type : $scope.typeOptions[0].value};
http://jsfiddle.net/MTfRD/2010/

The Blank empty option on top of drop down will appear if you have set ng-model with some value which is not contained in the list options created after the ng-Repeat.
Now if you consider the original post and remove the ng-model or set some valid value in ng-model, it will work fine
or you can set selected first item as
$scope.list_category = $scope.list_categories.data[0].id;