We Keep Coding

AngularJS ng-model definition for dropdown tree structure

I have a problem with my AngularJS application in which I have to chose the data from the dropdowns.
The problem is that when the first dropdown (brands) is changed the data must be injected only into second dropdown (models), not globally, to all the others second dropdowns - as shown in the jsfiddle.
JsFiddle
I know, that the problem is in the ng-model - how to should I define the ng-model?
<div ng-controller="MyCtrl">
<div ng-if="car" ng-repeat="car in cars">
<br><label>{{car.name}}</label><br>
<label>brand</label>
<select ng-model="car.brand" ng-options="car as car.name for car in brands" ng-change="loadBrands($index)">
<option value="">select</option>
</select>
<label>model</label>
<select ng-model="car.brand.model" ng-options="car as car.model for car in models">
<option value="">select</option>
</select>
<button ng-click="show($index)">show</button>
Thanks.

Instead of changing the $scope.models globally for all cars, you should update the models only for the selected Car:
JSFiddle with the following modifications:
$scope.loadBrands = function(index) {
if ($scope.cars[index].brand.name == 'audi') {
$scope.cars[index].models = $scope.audi;
} else {
$scope.cars[index].models = $scope.bmw;
}
}
and the select for the models should be changed to:
<select ng-model="brand.model" ng-options="car as car.model for car in cars[$index].models">
<option value="">select</option>
</select>

Angular ng-option custom filter multiple dropdowns

I have a project requiring that I build an angular menu with multiple drop down filters. As the end user selects one filter the other two filters update accordingly. I already learned the hard way not to use the ng-repeat with options and now for the life of me cannot figure out how to get my select fields in the view to reflect changes that will be caused by events in the view.
Here is my html:
<div class="large-8 columns" ng-controller="democontroller" >
<label> Demographic
<select ng-options = "x.demo as x.demo for x in groups | filteredDemo" ng-model = "demoValue">
<option value="">Please Select A Group</option>
</select>
</label>
<label> Location
<select ng-model = "locationValue" ng-options = "x.location as x.location for x in groups ">
<option value="">Please Select A Location</option>
</select>
</label>
<label> Days
<select ng-model = "dayValue" ng-options = "x.days as x.days for x in groups " >
<option value="">Please Select A Meeting Day</option>
</select>
</label>
</div>
<div class="large-8 columns">
<p>
</p>
</div>
</div>
and here is my current javascript:
var app=angular.module('selectapp',[]);
app.controller('democontroller',['$scope','$http',function($scope,$http){
$http.get("jsoninfo.php").success(function(response){$scope.groups=response;});
$scope.currentValues = ['1','0','0'];
app.filter('filteredDemo', function(){
return function(e){
if(e == 1){
return e;
}
}
});
}]);
any help would be greatly appreciated.

I'll try to explain the howto with two levels (group and location). Adding levels should be obvious after that.
ng-model value of the first select list will hold the selectedGroup
ng-model value of the second select list will hold the selectedLocation
In ng-options, We must select the full object, but we will diplay only the name. Thus we will have ng-options="group as group.name for group in groups". We select the full object because in the dependent dropdown, we will iterate over the nested collection, here selectedGroup.locations
<label>Demographic
<select ng-model="selectedGroup" ng-options="group as group.name for group in groups">
<option value="">Please Select A Group</option>
</select>
</label>
<label>Location
<select ng-model="selectedLocation" ng-options="location as location.name for location in selectedGroup.locations">
<option value="">Please Select A Location</option>
</select>
</label>
Here is a demo fiddle I've made with dummy data.

ng-model in select box is not working correctly

I am using angular js to draw select boxes.
<select ng-model="selected">
<option value="{{obj.id}}" ng-repeat="obj in values">{{obj.name}} </option>
</select>
selected id - {{selected}}
Here the default selected is not initialized according to value selected.
Have made a fiddle for the problem.

You should use ngOptions directive to render selectbox options:
<select ng-model="selected" ng-options="obj.id as obj.name for obj in values"></select>
Fixed demo: http://jsfiddle.net/qWzTb/1984/

case 2 is updated in this plunker
http://jsfiddle.net/26yjn8ru/
<div ng-repeat="arr in itr">
<select ng-model="arr.id"
ng-options="value.id as value.name for value in values">
</select>

Just add ng-selected="selected == obj.id" in the option tag
<option value="{{obj.id}}" ng-repeat="obj in values" ng-selected="selected == obj.id" >
{{obj.name}}
</option>

Correct Way would be like :
<select id="select-type-basic" [(ngModel)]="status">
<option *ngFor="let status_item of status_values">
{{status_item}}
</option>
</select>
Value Should be avoided inside option since that will set the default value of the 'Select field'. Default Selection should be binded with [(ngModel)] and Options should be declared likewise.
status : any = "Completed";
status_values: any = ["In Progress", "Completed", "Closed"];
Declaration in .ts file

How to create select option using directives on button click in Angularjs

I want to know how can i duplicate a select tag when i already render it using this lists..
var lists = [{name: "blue"},{name: "green"},{name: "red"},{name: "yellow"}]
and there is a add button to duplicate this select tags.
I created fiddle for this:
http://jsfiddle.net/rdy4e4xx/
I am thinking to used directives for this but i dont know where to start. Thanks guys.

I think you are looking for something like this (Updated):
HTML:
<div ng-controller="ListsCtrl">
{{ mySizes }}
<select ng-model="selectTag.value" ng-repeat="selectTag in selectTags">
<option value="">- - Make Selection - -</option>
<option ng-repeat="size in sizes" value="{{ size.name }}">{{ size.name}}</option>
</select>
<button type="button" ng-click="duplicateSelectTag()">Duplicate Select Tags</button>
Selected values:
<ul ng-repeat="selectTag in selectTags">
<li>{{selectTag.value}}</li>
</ul>
</div>
JS:
var app = angular.module("app",[]);
app.controller('ListsCtrl',function($scope){
$scope.sizes = [{name: "blue"},{name: "green"},{name: "red"},{name: "yellow"}];
$scope.selectTags=[{
value:null
}];
$scope.duplicateSelectTag = function() {
$scope.selectTags.push({});
}
});
Demo

I think you are looking for this
<div ng-controller="ListsCtrl">
{{ mySizes }}
<select ng-model="mySizes">
<option value="">- - Make Selection - -</option>
<option ng-repeat="size in sizes" value="{{ size.name }}">{{ size.name}}</option>
</select>
<button ng-click="dupplicate(mySizes)">Duplicate Select Tags</button>
</div>
var app = angular.module("app",[]);
app.controller('ListsCtrl',function($scope){
$scope.sizes = [{name: "blue"},{name: "green"},{name: "red"},{name: "yellow"}];
$scope.dupplicate = function(mySizes){
$scope.sizes.push({name: mySizes});
};
});

Select Tag Options won't work with ng-repeat

I need to use ng-repeat with the options within a Select menu like so
<select name="category" id="category" ng-model="rumor.category" validation-pattern="requiredOnly" error-icon>
<option ng-repeat="cat in formOptions.categories" value="{{ cat }}" >{{ cat }}</option>
</select>
However on rendering my select is empty and when inspecting the console I see the following:
<select id="category" class="ng-scope ng-pristine ng-invalid ng-invalid-required" ng-model="rumor.category" name="category" required="required">
<option value="? undefined:undefined ?"></option>
</select>
Now I know I should really use ng-options on the select menu however I wish to include angular-ui / ui-select2 which is incompatable with ng-options and the documentation recomends using a repeater (see https://github.com/angular-ui/ui-select2)
When I use the same repeater on a different tag, for example:
<p ng-repeat="cat in formOptions.categories" value="{{ cat }}" >{{ cat }}</p>
the repeater works as expected. Any ideas why this is?
Thanks in advance.

You shouldn't use ng-repeat for select options. Use ng-options (link) instead:
<select name="category"
id="category"
ng-model="rumor.category"
validation-pattern="requiredOnly"
error-icon
ng-options="c.cat for c in formOptions.categories">
</select>

You can use select option with ng-repeat.
JS:
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.categories = [ {'cat' : '1'}, {'cat' : '2'}, {'cat' : '3'}, {'cat' : '4'}] ;
}
HTML:
<div ng-app="myApp">
<div ng-controller="MyCtrl">
<select ng-model="item.value">
<option ng-repeat="cat in categories" value="{{cat.cat}}">{{cat.cat}}</option>
</select>
</div>
</div>
You can also fiddle: http://jsfiddle.net/usmanfaisal/vHw7N/