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>
Related
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.
I have a form that builds out multiple widgets based on some JSON data. In part of that form is a select dropdown, and some items have different options selected by default.
ie:
object 1 {
tag: "products"
}
The select dropdown in the ng-repeat widget
<select class="btn-success form-control">
<option value="companies">companies</option>
<option value="news">news</option>
<option value="people">people</option>
<option value="products">products</option>
</select>
^ Here if this was object 1, I'd need the products option to gain the selected attribute.
What I've tried so far, that hasn't worked, but so you can see my thinking:
HTML
ng-repeat="stuff in stuffs"...
<select class="btn-success form-control">
<option value="companies">companies</option>
<option ng-if="widget.selectedTag(stuff.tag)" value="news">news</option>
<option value="people">people</option>
<option value="products">products</option>
</select>
Controller
this.selectedTag= function(s) {
console.log(s);
if (s = 'news'){
return 'selected';
}
}
How would you go about this?
Found answer here: Initializing select with AngularJS and ng-repeat
<option ng-selected="{{operator.value == filterCondition.operator}}"
ng-repeat="operator in operators"
value="{{operator.value}}">
So in my case:
<option value="products"
ng-selected="{{stuff.tag == 'products'}}">products</option>
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
I would like to have a dynamic select option values bind to select dropdown.
<div ng-repeat="condition in conditions">
<div class="form-group">
<select ng-model="condition.Description" class="form-control">
<option value="">- Select -</option>
<option ng-value="{{age.Description}}" ng-repeat="age in ageConditions">{{age.Description}}</option>
</select>
</div>
</div>
I like
age in ageConditions
to be dynamic. I also tried ng-options="dynamicOptions" but it always bind to the same list.
I want to achieve this with ng-repeat.
Repeat 1:
<select ng-model="condition.Description" class="form-control">
<option value="">- Select -</option>
<option ng-value="ageCondition1">ageCondition1</option>
<option ng-value="ageCondition2">ageCondition2</option>
</select>
Repeat 2:
<select ng-model="condition.Description" class="form-control">
<option value="">- Select -</option>
<option ng-value="yearsCondition1">yearsCondition1</option>
<option ng-value="yearsCondition2">yearsCondition2</option>
</select>
As shown i want the option in select to be dynamic in ng-repeat.
Any idea?
<select ng-model="condition.Description" class="form-control">
<option value="">- Select -</option>
<option value="getValue(age, $parent.$index)" ng-repeat="age in ageConditions"> getText(age, $parent.index)</option>
</select>
Please note that $parent.$index is used.
the dynamic nature van be achieved used functions which return the value based in $index.
$scope.getValue = function(age, index) {
if(index === 1) return age.Desciption else age.years;
}
$scope.getText = function(age, index) {
if(index === 1) return age.Desciption else age.years;
}
hope this helps
Solved this by creating a directive that created a new scope for select.
I have some problem with my selects. Here is code:
<select ng-model="car" ng-options="car.name for car in cars track by car.id" class="form-control">
<option value="">Choose model name</option>
</select>
<br />
<select ng-options="model.name for model in car.models track by model.id" ng-model="model" class="form-control">
<option value="">Choose car</option>
</select>
I want that when i visit this page that the two selects have default values. For example in first select - "BMW" and in second - "528I" at the same time. I'm trying to do this solution:
<select ng-model="car" ng-init="car.id = 1" ng-options="car.name for car in cars track by car.id" class="form-control">
<option value="">Choose model name</option>
</select>
<br />
<select ng-init="model.id = 5" ng-options="model.name for model in car.models track by model.id" ng-model="model" class="form-control">
<option value="">Choose car</option>
</select>
But it work only for the fisrt select. (And when i choose the name in first select with name with id = 1, the second select to switch to the model with id = 5;)
I don't know how to reailze default values in two selects at the same time.
Have you any ideas?
Here is plunker
You could just use ng-init, like this:
<select ng-init="car=cars[0]" ng-model="car" ng-options="car.name for car in cars" class="form-control">
<option value="">Choose model name</option>
</select>
<br />
<select ng-init="model=car.models[0]" ng-options="model.name for model in car.modelsd" ng-model="model" class="form-control">
<option value="">Choose car</option>
</select>
UPDATE
The syntax of your select was a bit off, you actually don't need to use track by unless you are grouping the values of your select, which you are not. I think that what you actually wanted was to have the model bound to the id of the 'car' rather than having the model bound to the car itself. If that's what you want you could do it like this:
<select ng-init="car=1" ng-model="car" ng-options="car.id as car.name for car in cars" class="form-control">
<option value="">Choose model name</option>
</select>
But then you would have to do something very awkward in order to render the second select with the models of the car, because in that case your variable car would be an int (the id of the car), not the 'car' object, so you would have to do something like this:
<select ng-init="model=5" ng-model="model" ng-options="model.id as model.name for model in ((cars | filter:{id:car})[0].models)" class="form-control">
<option value="">Choose car</option>
</select>
Which is just as awkward as it looks, but if that's what you want... well, here you have an example:
Working example
A better idea in my opinion would be to have the models pointing to the objects, and if you want to initialize the selects through the id, you could do this in the ng-init :
<select ng-init="car=(cars|filter:{id:1})[0]" ng-model="car" ng-options="car.name for car in cars" class="form-control">
<option value="">Choose model name</option>
</select>
<br />
<select ng-init="model=(car.models|filter:{id:5})[0]" ng-options="model.name for model in car.models" ng-model="model" class="form-control">
<option value="">Choose car</option>
</select>
Working Example
You may use ng-model attribute in your controller and assign a default variable like
<div ng-controller="MyController" >
<form>
<select ng-model="myForm.car">
<option value="nissan">Nissan</option>
<option value="toyota">Toyota</option>
<option value="fiat">Fiat</option>
</select>
</form>
<div>
{{myForm.car}}
</div>
</div>
<script>
angular.module("myapp", [])
.controller("MyController", function($scope) {
$scope.myForm = {};
$scope.myForm.car = "nissan";
} );
</script>
jsbin
and go through this link so that you will come to know form handling in angularjs:
http://tutorials.jenkov.com/angularjs/forms.html