I have a dropdown menu in HTML as below, with a default option. I am using ng-options to generate the remaining options thus binding these and not the first with the variable dropdown.
<td>
<select ng-model="dropdown" ng-options="item as item.name for item in items">
<option value="">--- Select an item---</option> <!-- default -->
</select>
</td>
Results in to the following HTML
<td>
<select ng-model="dropdown" ng-options="item as item.name for item in items">
<option value="">--- Select an item---</option>
<option value="0" label="item1">item1</option>
<option value="1" label="item2">item2</option>
<option value="2" label="item3">item3</option>
</select>
</td>
I need to support a reset button, which should reset the drop down to the default option "Select an item". Since this option is not bound to the model. i cant do something like this -
$scope.dropdown = items[0] // this would select item1
or even
$scope.dropdown = null
How can i reset my dropdown to the first option ?
try like this.
var app = angular.module("app",[]);
app.controller("MyCtrl" , function($scope){
$scope.items = [{name:"ali"},{name:"reza"}];
$scope.dropdown = $scope.items[0];
$scope.reset = function(){
$scope.dropdown = {};
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
<select ng-model="dropdown" ng-options="item as item.name for item in items">
<option value="">--- Select an item---</option>
</select>
<button type="submit" name="button" ng-click="reset()">Reset</button>
</div>
Related
I have two drop down lists like the following:
HTML
<div class="col-md-3">
<select class="form-control" ng-model="select1">
<option value="" selected disabled>Select First</option>
<option ng-repeat="item in items" value="{{item.name}}">{{item.name}}</option>
</select>
</div>
<div class="col-md-2">
<select class="form-control" ng-model="select2">
<option value="" selected disabled>Select Second</option>
<option ng-repeat="item in items|filter:itemFilter" value="{{item.stuff}}">{{item.stuff}}</option>
</select>
</div>
my list of items looks like:
[
{name:"foo1", stuff:["bar1","bar2","bar3"]},
{name:"foo2", stuff:["bar4","bar5","bar6"]},
{name:"foo3", stuff:["bar7","bar8","bar9"]}
]
Controller
$scope.itemFilter = function (item) {
return item.name == $scope.select1;
};
Objective
When I select foo1 from the first dropdown, the second dropdown should have 3 options bar1,bar2,bar3
Current
When I select foo1 from the first dropdown, the second dropdown contains one option ["bar1","bar2","bar3"]
One way is to use a method to filter, and call that filter method on ngChange of the first drop-down.
<select class="form-control" ng-model="select1" ng-change="filterItems()">
Here is the definition of the filter method
$scope.filterItems = function() {
var index = 0;
for (var i = 0; i < $scope.items.length; i++) {
if ($scope.items[i].name == $scope.select1) {
index = i;
break;
}
}
$scope.filteredItems = $scope.items[index].stuff;
};
And bind your second drop-down to the filtered list
<select class="form-control" ng-model="select2">
<option value="" selected disabled>Select Second</option>
<option ng-repeat="item in filteredItems">{{item}}</option>
</select>
Here is a fully working Plunkr
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>
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'm trying to create a dropdown list from an angular controller:
My html code:
<select>
<option value="" disabled selected >Choose your option</option>
<option ng-repeat="ty in type">{{ty.$value}}</option>
</select>
Controller code:
var typeRef = new Firebase(FIREBASE_URL + "/type");
var typeArray = $firebase(typeRef).$asArray();
typeArray.$loaded().then( function (data) {
$scope.type = data;
console.log(data);
});
In this case it works:
<ul id='dropdown2' class='dropdown-content'>
<li ng-repeat="ty in type">{{ty.$value}}</li>
</ul>
The ty.$value works in above code, but in this <select> tag doesn't show anything any idea why is that?
You don't need to use ng-repeat, you can use ng-options
<select ng-options="ty.$value for ty in type" ng-model="something">
<select>
Use
<select ng-options="ty.$value as ty.$value for ty in type" ng-model="achvtype"> <option value="" disabled selected >Choose your option</option> </select>
http://jsbin.com/juhamul/edit?html,js,output
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});
};
});