I've started learning Angularjs. I was following w3schools tutorial and I needed to try out something.
Here I want to list the dropdown according to the radio button I've checked. (When I select Name, I need only the names in dropdown, when I select City, I need only the Cities in dropdown and so on).
<body ng-app="myApp" ng-controller="myController">
<div>
<input type="radio" ng-model="selection" value="Name">Name
<input type="radio" ng-model="selection" value="Country">Country
<input type="radio" ng-model="selection" value="City">City
<br>
<div ng-switch="selection">
<div ng-switch-when="Name">
<ul>
<li ng-repeat="x in names">{{x.Name}}</li>
</ul>
</div>
<div ng-switch-when="Country">
<ul>
<li ng-repeat="x in names">{{x.Country}}</li>
</ul>
</div>
<div ng-switch-when="City">
<ul>
<li ng-repeat="x in names">{{x.City}}</li>
</ul>
</div>
</div>
<br>
<select ng-model="selectedName" ng-options="x.Name for x in names"></select>
</div>
</body>
And this is the angular script file.
var app = angular.module('myApp',[]);
app.controller('myController', function($scope,$http){
$http.get('http://www.w3schools.com/angular/customers.php')
.then(function(response){
$scope.names = response.data.records;
});
});
If I'm understanding correctly, for your <select> element you want to conditionally display the label based on the selection from the ng-model="selection" radio input item. You can use a function within your ng-options to target a property for the label based on the selection passing in both the item being iterated as well as the selection from the radio inputs:
JS:
$scope.foo = function(x, selection) {
switch(selection) {
case 'Name':
return x.Name;
break;
case 'City':
return x.City;
break;
case 'Country':
return x.Country;
default:
return x.Name;
}
}
HTML:
<select ng-model="selectedName" ng-options="x.Name as foo(x, selection) for x in names"></select>
Here is a Plunker showing ng-options with as syntax utilizing a function for conditional label dropdown display.
Hopefully that helps!
You could combine your ng-repeat's and use a filter on the options.
html
<select class="form-control" ng-model="selectedName">
<option value="" selected disabled>Select Name</option>
<option ng-repeat="n in names" value="{{n.Name}}">{{n.Name | filter:isSelection('Name')}}</option>
<option ng-repeat="n in names" value="{{n.Country}}">{{n.Country| filter:isSelection('Country')}}</option>
<option ng-repeat="n in names" value="{{n.City}}">{{n.City| filter:isSelection('City')}}</option>
</select>
JS
$scope.isSelection = function(x){
return x == $scope.selection;
}
Each ng-repeat uses the filter with a string of what type of selection it is. This will filter out any option that is not of the same selection
Related
I have a multiple select options and select all button. When clicked on select all button then all options should get highlighted. However, in my case when clicked on select all button then I am getting all the options as selected and it's values but the options are not getting highlighted.
Here's my controller code.
$scope.selectedAll = function(){
$scope.user.profile = [];
angular.forEach($scope.userprofiles, function(item){
$scope.user.profile.push( item.profile);
});
}
HTML:
<div class="label_hd">Profiles
<input type="button"
id="select_all"
ng-click="selectedAll()"
name="select_all"
value="Select All">
</div>
<select multiple
class="browser-default"
name="userprofile"
id="userprofile"
ng-model="user.profile">
<option ng-repeat="profile in userprofiles"
value="{{profile.profile}}">
{{ profile.profile_name }}
</option>
</select>
Here is a fiddle: https://jsfiddle.net/MSclavi/zybnjpot/12/
You were on the right path. Instead of using a ng-repeat with your options, use ng-options. Here is the documentation https://docs.angularjs.org/api/ng/directive/ngOptions. Good luck
I already googled my problem but nothing really helped me.
I need an input field, which also works like a dropdown. So I can write my own data in the input field or select data from the dropdown. I tried with select but then I can only select data and can't write data in the input. That's why I used datalist.
I want to write my data from my array to my datalist like that:
index.html
<input type="text" ng-model="model.person.profession" list="professions"/>
<datalist id="professions">
<option ng-repeat="profession in professions" value="{{profession.id}}">{{profession.name}}</option>
</datalist>
app.js
$scope.professions = [
{'id':1, 'name':'doctor'},
{'id':2, 'name':'farmer'},
{'id':3, 'name':'astronaut'}
];
My data isn't shown in the dropdown. What am I doing wrong?
You can use ng-options for showing the value in drowpdown. Pleae take a look at this fiddle.
<select ng-model="selected">
<option ng-repeat="value in professions" value={{value.id}}>{{value.name}}</option>
</select>
angular.module('myApp', [])
.controller("dataListController", function ($scope){
$scope.professions = [
{'id':1, 'name':'doctor'},
{'id':2, 'name':'farmer'},
{'id':3, 'name':'astronaut'}
];
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<main ng-app="myApp">
<section ng-controller="dataListController">
<input list="browsers" name="browser">
<datalist id ="browsers">
<option ng-repeat="x1 in professions" value="{{x1.name}}">
</datalist>
</section>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<main ng-app="myApp">
<section ng-controller="dataListController">
<input list="browsers" name="browser">
<datalist id ="browsers">
<option ng-repeat="x1 in professions" value="{{x1.id}}">
</datalist>
</section>
</main>
Add Select element before option . And add track by $indexinside ng-repeat as well. Else for duplicate data, you will get error.
<select>
<option ng-repeat="value in professions track by $index " value="{{value.id}}">{{value.name}}</option>
</select>
or,
<select>
<option ng-repeat="(key, value) in professions " value="{{key.id}}">{{value.name}}</option>
</select>
DEMO: http://jsfiddle.net/HB7LU/28745/
Add ng-value instead of value in options
<option ng-repeat="profession in professions" ng-value="{{profession.id}}">{{profession.name}}</option>
Give your plunkr/code snippet
You can also try using ngOptions like this:
<select class="form-control" ng-model="selectedOption" ng-options="option.name for option in professions track by option.id">
There must be select instead of datalist :
<select>
<option ng-repeat="(key, value) in professions " value="{{id}}">{{value}}</option>
</select>
I have code like this
{"xyz":[{"a":1,"b":"","c":""}],
"pqr":["l","m"],
"abc":["1234","5678"]}
<div ng-model="item" ng-repeat="product in xyz">
<div>{product.a}</div>
<div>
<select>
<option ng-repeat="value in pqr">{{value}}</option>
</select>
</div>
<div>
<select>
<option ng-repeat="number in abc">{{number}}</option>
</select>
</div>
</div>
I want to update my object on changing the values in dropdowns and update the onject "xyz"!
try like this.
you should define model for select tag.
var app = angular.module("app",[]);
app.controller("MyCtrl" , function($scope){
$scope.data =
{
"xyz":[{"a":1,"b":"","c":""}],
"pqr":["l","m"],
"abc":["1234","5678"]
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
<div ng-repeat="(key,value) in data.xyz">
<div ng-repeat="(k,v) in value">{{v}}</div>
<div>
<select ng-model="model1" ng-options="v1 as v1 for v1 in data.pqr" ng-change="value.b = model1">
</select>
</div>
<div>
<select ng-model="model2" ng-options="number as number for number in data.abc" ng-change="value.c = model2">
</select>
</div>
</div>
</div>
First of all don't use ng-repeat on <option> use ng-options instead. Documentation and examples can be found here: https://docs.angularjs.org/api/ng/directive/ngOptions
As for your code, you will need to bind the select to your object:
<select ng-model="product.a" ...> //or which ever property you are trying to update
I am having a dynamic list of data which i am showing by dropdownlist.
But i want one those to be selected when the user enters the page.
<div class="row">
<div class="col">
<select ng-model="item1" style="width:100%;text-align:center;">
<option style="text-indent:30%" ng-repeat="item1 in IdeaMonthList" value="{{item1}}" >{{item1}}</option>
</select>
</div>
</div>
This is how i am making the dropdown list.
var IdeaMonth=["1","2","3","4","5","6","7","8","9","10","11","12"]
$scope.IdeaMonthList=IdeaMonth;
This is my array of months.By deafult when the user enters this page the current month should be selected in dropdownlist.
Using we can choose the option for static option.
How to do it for Dynamic options
Use ngOptions in angularjs.
The ngOptions attribute can be used to dynamically generate a list of
elements for the element using the array or object
obtained by evaluating the ngOptions comprehension expression.
<select ng-model="item1" ng-options="item for item in IdeaMonthList" style="width:100%;text-align:center;"></select>
Try this:
<div class="row">
<div class="col">
<select ng-model="item1" style="width:100%;text-align:center;">
<option style="text-indent:30%" ng-repeat="item in IdeaMonthList" value="{{item}}" >{{item}}</option>
</select>
</div>
</div>
var IdeaMonth=["1","2","3","4","5","6","7","8","9","10","11","12"]
$scope.IdeaMonthList=IdeaMonth;
$scope.item1 =$scope.IdeaMonthList[new Date().getMonth()];
<div class="row">
<div class="col">
<select ng-model="item1" style="width:50%;text-align:center;" ng-options="item for item in IdeaMonthList">
</select>
</div>
</div>
var IdeaMonth=["1","2","3","4","5","6","7","8","9","10","11","12"]
$scope.IdeaMonthList=IdeaMonth;
$scope.item1 =$scope.IdeaMonthList[new Date().getMonth()];
Plunker -- http://plnkr.co/edit/8dZXycSTYhQOog12FpEK?p=preview
I think change your ng-model name
<select ng-model="selected" style="width:100%;text-align:center;">
And your JS File:
$scope.selected =$scope.IdeaMonthList[new Date().getMonth()];
I want to display the selected items in a label or list.
I am using switch to switch between form and result. Please see the code below
<div ng-switch on="format">
<div ng-switch-when="form">
<div class="floatLeft">Seeeeeelect</div>
<select multiple="multiple" ng-model="test">
<!--<option value ="sdfsdf" ng-repeat="n in ['a','b','c']">{{n}}</option>-->
<option value ="AAA">AAA</option>
<option value ="BBB">BBB</option>
<option value ="CCC">CCC</option>
</select>
{{test}}
</div>
<div ng-switch-when="result">{{test}}</div>
</div>
<button ng-click="showForm()">Form</button>
<button ng-click="showPreview()">Result</button>
In controller i have the method like below,
$scope.showPreview=function() {
$scope.format='result';
};
$scope.showForm=function() {
$scope.format='form';
};
After selecting the items in list, when i try to switch to see the "result" by tapping "Result" button. The selected item is not populating.
Can anyone tell me where i went wrong.
Thanks
The ng-switch creates sub-scopes. So you have to reference test by $parent.test.
<select multiple="multiple" ng-model="$parent.test">
<div ng-switch-when="result">{{ $parent.test }}</div>
</select>
{{ $parent.test }}
</div>
fiddle