In Angular Js is there a way to use a select element the same way you can with a list of links?
For example if I have some links like this:
<a ng-click="ctrl.change('argument1','argument2')">One</a>
<a ng-click="ctrl.change('argument3','argument4')">Two</a>
...
Is there a way I can do the same thing with a select element?
<select>
<option value="argument1,argument2">One</option>
<option value="argument3,argument4">Two</option>
...
</select>
you can pass the variables and model through ng-change , hope below code helps you,
template
<div ng-controller="myCtrl">
<select ng-model="item" ng-options="i.name for i in items" ng-change="changed('hello','world',item)">
<option value="">choose items</option>
</select>
</div>
controller
function myCtrl($scope) {
$scope.items = [{
"name": "first",
"type" : "type1"
}, {
"name": "second",
"type" : "type2"
}, {
"name": "third",
"type" : "type3"
}];
$scope.changed = function (hello,world,item) {
alert(hello); // argument1
alert(world); //argument2
alert(item.type); //model argument based on the selection
}
}
do u mean this? use controller value instead of scope value if u wish
<select ng-options="['a,b','c,d']" ng-model="selected" ng-change="ctrl.change(selected)">
Related
I'm new to angular and was wondering is it possible to replace firstP inside ng-repeat Directive with a variable? I'm using AngularJS v1.6.6
ng-repeat="option in people['firstP']"
var people = {
"firstP": [
"",
"James",
"Jack",
],
"SecondP": [
"",
"Bill",
"Bob",
]
};
is it possible to replace firstP inside ng-repeat Directive with a variable?
Yes it's possible to replace firstP with a variable, after all you are just using the normal javascript object bracket notation in Angular.
Solution:
If you are trying to display the people object contents dynamically, then you can do it like this:
<div ng-repeat="(key, value) in people">
<select>
<option ng-repeat="option in people[key]">{{option}}</option>
</select>
</div>
First you need to loop over the people object keys, then for each key take the relevant array, then loop over each array to display its contents.
Note:
Note that we can replace the people[key] with value directly in the ng-repeat so it becomes ng-repeat="option in value".
I just used people[key] for the question purpose, to answer your specific question.
Demo:
Here's a live working Plunker.
I think you have to assign people object to $scope variable in order to access people object in your html.
HTML
<html ng-app="myApp" ng-controller="testCtrl">
<ul>
<li ng-repeat="name in people[element]">{{name}}</li>
</ul>
</html>
JS
var app = angular.module('myApp', []);
var testCtrl = function($scope){
$scope.element = 'firstP';
$scope.people = {
"firstP" : [
"Jake",
"James",
"Jack",
],
"SecondP" : [
"",
"Bill",
"Bob",
]};
}
app.controller('testCtrl',['$scope',testCtrl]);
to check https://jsfiddle.net/0zk4mfak/6/
As per my understanding,
Define the array in your controller with the $scope variable:
In controller:
app.controller('nameCtrl', function($scope) {
$scope.people = { firstP: ['james', 'jack'] };
});
In Html:
<div ng-controller="nameCtrl">
<ul>
<li ng-repeat="option in people.firstP">{{option}}</li>
</ul>
</div>
Try this.Hope it helps..!
Your code looks suspiciously like it will populate a select (dropdown) box. If that is the case use ng-options for Angular 1:
Given this array of items on the $scope:
$scope.items = [{
id: 1,
label: 'aLabel',
subItem: { name: 'aSubItem' }
}, {
id: 2,
label: 'bLabel',
subItem: { name: 'bSubItem' }
}];
This will work:
<select ng-options="item as item.label for item in items track by item.id"
ng-model="selected"></select>
$scope.selected = $scope.items[0];
or ngFor in Angular 2 like in this answer:
<select name="selectmake" [(ngModel)]="makeListFilter">
<option *ngFor="let muscleCar of muscleCars" [ngValue]="muscleCar">
{{muscleCar.name}}
</option>
</select>
I have the following HTML code and want the select dropdown once loaded to automatically select the entry coming from the DB - in this case from the rule.id variable. How do I do this in AngularJS?
<div class="card-second-input" ng-if="rule.unfolded">
<select ng-init="rule.actionId" class="rectangle-30" ng-class="rules-option" ng-model="selectedAction" ng-options="team.name for team in teams track by team.id">
<option class="rules-option" value="">Select Team</option>
</select>
</div>
P.S I am using Angular 1.x
Basically setting the ng-model value to required team object can make this change.
This should be done inside controller.
Kindly have a look into following code:-
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<select class="rectangle-30" ng-model="selectedAction" ng-options="team.name for team in teams track by team.id">
<option value="">Select Team</option>
</select>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.teams = [
{"name": "A", "id" : 1},
{"name": "B", "id" : 2},
{"name": "C", "id" : 3},
{"name": "D", "id" : 4}
];
$scope.selectedAction = {"name": "B", "id" : 2};
});
</script>
</body>
</html>
Focus on line
$scope.selectedAction = {"name": "B", "id" : 2};
Take a look at this post. I think this may be the solution you are after
How to set a selected option of a dropdown list control using angular JS
Use ng-option like this
ng-options="team.id as team.name for team in teams track by team.id"
And set your item Id to model like this $scope.selectedAction = ieamId from controller which get from DB.
I used ngstorage to save some value in localstorage
My contrroller is:
app.controller("main", function( $scope, $localStorage) {
$scope.$storage = $localStorage.$default({
selectedlanguage: { language: null, text: "All Languages" }
});
$scope.languages = [
{ language: null, text: "All Languages" },
{ language: "en", text: "English" },
{ language: "ar", text: "Arabic" }
];
}
My view is:
<select ng-model="$storage.selectedlanguage" ng-options="lang.text for lang in languages">
</select>
when reload the page angular can not bind the selectedlanguage
Thanks in advance
In the ng-options attribute, you can specify the values and title for each option in the expression it self, your other issue was that you're specifying an object as the ng-model, you need to tell the dropdown which value to match on, so accessing language on the selectedlanguage object will work fine.
<select ng-model="$storage.selectedlanguage.language" ng-options="lang.language as lang.text for lang in languages">
</select>
The above is the same as below, but a more complex expression, the below is just easier to read but it's exactly the same:
<select ng-model="$storage.selectedlanguage.language">
<option ng-repeat="lang in languages" value="{{lang.language}}">
{{lang.text}}
</option>
</select>
Demo: https://jsfiddle.net/suunyz3e/289/
I am trying to create a dropdown list using ng-options:
<!DOCTYPE html>
<html ng-app="m1">
<head>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js'></script>
</head>
<body ng-controller="c1">
<div>
Sort1
<select ng-model="sortKey1">
<option value="bookId">By Id</option>
<option value="bookTitle">By Title</option>
<option value="cost">By Cost</option>
</select>
</div>
<div>
Sort2
<select ng-model="sortKey2" ng-options="x for x in Object.keys(books[0])">
</select>
</div>
<div>
Sort3
<select ng-model="sortKey3" ng-options="x for x in bookKeys">
</select>
</div>
</body>
<script type="text/javascript">
var m1 = angular.module("m1", []);
m1.controller('c1',function($scope)
{
$scope.books = [
{
"bookId": 101,
"bookTitle": "Angular JS",
"cost":375,
},
{
"bookId": 102,
"bookTitle": "Instant AngularJS Starter",
"cost":150,
},
{
"bookId": 103,
"bookTitle": "Ng-Book: The Complete Book on AngularJS",
"cost":4657,
}];
console.log(Object.keys($scope.books[0]));
$scope.bookKeys = Object.keys($scope.books[0]);
});
</script>
</html>
I am trying to get the dropdown values from an object's keys by calling Object.keys() on an object and then using the resultant array in ng-options.
I am trying to create the effect of case 1. My attempt at case 2 is not working, however a similar thing implemented in case 3 is working.
Can anybody tell the reason why case 2 is not working?
Update
As indicated in Zen's answer, the reason Object.keys() does not work in ng-repeat is due to the context in which it is evaluated (that being the context of $scope).
Angular has this functionality built in in the form of (key, val). Sometimes the support for native javascript functions within an Angular express is limited and in this instance Angular probably doesn't understand Object.keys() as the source for ng-options. Change the <select> in your case 2 to:
<select ng-model="sortKey2" ng-options="key as key for (key,val) in books[0]">
Working example:
var m1 = angular.module("m1", []);
m1.controller('c1', function($scope) {
$scope.books = [{
"bookId": 101,
"bookTitle": "Angular JS",
"topic": "AngularJS",
"author": "Green",
"cost": 375,
}, {
"bookId": 102,
"bookTitle": "Instant AngularJS Starter",
"topic": "AngularJS",
"author": "Dan Menard",
"cost": 150,
}, {
"bookId": 103,
"bookTitle": "Ng-Book: The Complete Book on AngularJS",
"topic": "AngularJS",
"author": "Ari Lerner",
"cost": 4657,
}];
console.log(Object.keys($scope.books[0]));
$scope.bookKeys = Object.keys($scope.books[0]);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<div ng-app="m1" ng-controller="c1">
<div>
Sort1
<select ng-model="sortKey1">
<option value="bookId">By Id</option>
<option value="bookTitle">By Title</option>
<option value="topic">By Topic</option>
<option value="author">By Author</option>
<option value="cost">By Cost</option>
</select>
</div>
<div>
Sort2
<select ng-model="sortKey2" ng-options="key as key for (key,val) in books[0]">
</select>
</div>
<div>
Sort3
<select ng-model="sortKey3" ng-options="x for x in bookKeys">
</select>
</div>
</div>
EDIT: (applied to answer) If you want the value of a select option to not become the value of the object (for eg. 101, AngularJS etc.), you can write <select ng-model="sortKey2" ng-options="key as key for (key,val) in books[0]">
All binding expressions are evaluated relative to $scope. So when you write for x in Object.keys(books[0]), angular runs it as for( x in $scope.Object.keys([books[0]) ). Apparently, Object is not defined in the scope chains. If you want it to work, you can copy all global variables to the $rootScope, that doesn't seem to be a bad habit.
m1.run([`$rootScope`, function($rootScope){
var keys = Object.getOwnPropertyNames( window );
keys.forEach( key => {
$rootScope[key] = window[key];
});
}])
I have drop down inside ng-repeat as follows.
<div ng-model="list in lists">
<div>
<select ng-model="pType" ng-options="c.name in projType"></select>
<option value="{{list.value}"></option>
</div>
My Controller is
App.controller('pOverCtrl', function ($scope, pOverRepository, $location) {
$scope.lists = projOverRepository.query();
$scope.projType = [
{ value: '0', name: 'None Selected' },
{ value: '1', name: 'Construction' },
{ value: '2', name: 'Maintenance' },
];
})
The dropdown gets populated fine. But my goal is that when ng-repeat is executed it automatically shows the value that is coming from lists scope as selected.
Please let me know how to fix this issue.
use the diretive ng-selected
<div ng-model="list in lists">
<select ng-model="pType" ng-options="c.name in projType">
<option ng-selected="list.value == list.selected" value="{{list.value}"></option>
</select>
</div>
assuming that list.selected variable contains the value of the option selects
$scope.pType should have the selected value as it's bind by ng-model.
Read the docs here: http://docs.angularjs.org/api/ng/directive/select
And if you already have the selected value in $scope.lists, you can use the ngSelected directive.