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
Related
I am working on something which requires to come up with different options for different selections as list in forms.
for example:
If I select DR9 in System field, it has to show only 100,400,500 clients. same for QR9 - only 400 and 500.
But in my case, it's showing(100,400,500,400,500) repetitively.
Here is my code.
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
Password Reset
<form>
<br><label>System:</label>
<select ng-model="myVar">
<option value = "DR9">DR9</option>
<option value = "QR9">QR9</option>
<option value = "PR3">PR3</option>
</select>
<br><br>
<label>Client:</label>
<select>
<div ng-switch="myVar">
<div ng-switch-when="DR9">
<option>100</option>
<option>400</option>
<option>500</option>
</div>
<div ng-switch-when="QR9">
<option>400</option>
<option>500</option>
</div>
</div>
</select>
</form>
</div>
</body>
</html>
You cant apply ng-switch to a div with options instead add ng-switch to a div and apply ng-switch-when to select
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="">
Password Reset
<form>
<br><label>System:</label>
<select ng-model="myVar">
<option value = "DR9">DR9</option>
<option value = "QR9">QR9</option>
<option value = "PR3">PR3</option>
</select>
<br><br>
<label>Client:</label>
<div ng-switch="myVar">
<select ng-switch-when="DR9">
<option>100</option>
<option>400</option>
<option>500</option>
</select>
<select ng-switch-when="QR9">
<option>400</option>
<option>500</option>
</select>
<select ng-switch-default>
<option>100</option>
<option>400</option>
<option>500</option>
</select>
</div>
</form>
</div>
</body>
</html>
The template can be simplified by using the ng-options directive:
angular.module("app",[])
.controller("ctrl", function($scope) {
$scope.myVar = "PR3";
$scope.otherOptions = otherOptions("PR3");
$scope.updateOtherOptions = function(myVar) {
$scope.otherOptions = otherOptions(myVar);
};
function otherOptions(myVar) {
switch (myVar) {
case "DR9": return [100,400,500];
case "QR9": return [400,500];
default: return [100,400,500];
};
};
})
<!DOCTYPE html>
<html>
<script src="//unpkg.com/angular/angular.js"></script>
<body>
<div ng-app="app" ng-controller="ctrl">
Password Reset
<form>
<br>
<label>System:</label>
<select ng-model="myVar" ng-change="updateOtherOptions(myVar)">
<option value = "DR9">DR9</option>
<option value = "QR9">QR9</option>
<option value = "PR3">PR3</option>
</select>
<br>
Client options={{otherOptions}}
<br>
<label>Client:</label>
<select ng-model="otherSel" ng-options="sel for sel in otherOptions">
<option value="">Select...</option>
</select>
</form>
</body>
</html>
The ngOptions attribute can be used to dynamically generate a list of <option> elements for the <select> element using the array or object obtained by evaluating the ngOptions comprehension expression.
When an item in the <select> menu is selected, the array element or object property represented by the selected option will be bound to the model identified by the ngModel directive.
Optionally, a single hard-coded <option> element, with the value set to an empty string, can be nested into the <select> element. This element will then represent the null or "not selected" option.
For more information, see
AngularJS ng-options Directive API Reference
AngularJS API Reference - Using select with ngOptions and setting a default value
AngularJS ng-change Directive API Reference
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>
html code
<div ng-controller="DropdownCtrl as vm">
<select name="singleSelect" ng-model="data.model"
ng-change="vm.userSelect(data.model)"
ng-click="vm.loadTenantList()">
<option ng-repeat="tenant in vm.tenants" >{{tenant.name}}</option>
</select><br>
</div>
js code
$lmsapp.controller('DropdownCtrl',['tenantServices','dialogService',function (tenantServices,dialogService,$log){
var vm = this;
vm.tenants=[];
vm.loadTenantList=function(){
tenantServices.tenantList({},function(response){
vm.tenants=response.dataList;
});
};
vm.data = {
availableOptions: [
vm.loadTenantList()
]
};
}]);
how can I get the selected element?
you can get like this keep the id in the select option tag like below
<select name="singleSelect" ng-model="data.model"
ng-change="vm.userSelect(data.model)"
ng-click="vm.loadTenantList()" id="TenaList">
<option ng-repeat="tenant in vm.tenants" >{{tenant.name}}</option>
</select>
In your script
var e = document.getElementById("TenaList");
var selected_value = e.options[e.selectedIndex].value;
use this
<div ng-controller="DropdownCtrl as vm">
<select name="singleSelect" ng-model="vm.data"
ng-click="vm.loadTenantList()">
<option ng-repeat="tenant in vm.tenants" >{{tenant.name}}</option>
</select><br>
</div>
then you can get the selected item using vm.data
Rather use ng-options:
<div ng-controller="DropdownCtrl as vm">
<select name="singleSelect" ng-model="vm.selectedTenant" ng-init="vm.loadTenantList()"
ng-options="tenant as tenant.name for tenant in vm.tenants ">
</select>
</div>
vm.selectedTenant will give you selected tenant.
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 am trying to display a field based on the value of a select in my angular app. It should be very simple: when newJob.country === 'Remote' I want my 'city' field to disappear:
HTML:
<body ng-app>
<div class="form-aside">
<label>Location</label>
<select ng-model="newJob.country" class="form-control">
<option>Remote</option>
<option>France</option>
<option>UK</option>
</select>
</div>
<div class="form-aside" ng-if="newJob.country !== 'Remote'">
<label>City</label>
</div>
</body>
For some reason it's not working. Here is the plunker: http://plnkr.co/edit/GcJNePs9zvkejnIATTiw?p=preview
How can i make this work?
Thanks
You need to define a valuefor each <option> tag.
Then you need to use ng-show with != to dynamically display your label or not.
Your plunker should work with this:
<body ng-app>
<div class="form-aside">
<label>Location</label>
<select ng-model="newJob.country" class="form-control">
<option value="remote">Remote</option>
<option value="france">France</option>
<option value="uk">UK</option>
</select>
</div>
<div class="form-aside" ng-show="newJob.country != 'remote'">
<label>City</label>
</div>
</body>
Plunker here : http://plnkr.co/edit/meqpbOVXrH4ANtQlxdoy?p=preview
Your version of Angular doesn't support ng-if.
Try :
<div class="form-aside" ng-show="newJob.country != 'Remote'">
Or update your version of Angularjs to 1.2.15, the last stable version.