I'd like to use ng-options for my select using AngularJS but it seems not working as I'd like...
Below you can see javascript code, which contain from creating array
and also view, where ng-options are using.
var vm = this;
vm.selectedUser;
vm.userDatas = [
{ id: 1, name: "Ruslan", surname: "Poltayev" },
{ id: 2, name: "Handor", surname: "Ten" }
];
<div id="page-content-wrapper"
data-ng-controller="TableShowCtrl as t">
<select data-ng-model="t.selectedUser"
data-ng-options="item.name for item in t.userDatas track by item.id">
</select>
</div>
I have this results
enter image description here
You need to declare the elements to display the different options. To display options using the name property you can use this:
<select ng-model="selected.user">
<option ng-repeat="item in t.userDatas">{{ item.name }}</option>
</select>
<!-- display selected user -->
{{ t.selected.user | json }}
Check this.
<body ng-app="Sample">
<h1>Sample Angular controller</h1>
<div ng-controller="Ctrl">
<div id="page-content-wrapper" >
<select ng-model="t.selectedUser" ng-options="item.name for item in usrDatas ">
</select>
</div>
</div>
</body>
Script:
// Code goes here
var app = angular.module("Sample",[]);
app.controller("Ctrl", function($scope){
var vm = this;
vm.selectedUser;
$scope.userDatas = [ { id: 1, name: "Ruslan", surname: "Poltayev" },
{ id: 2, name: "Galym", surname: "Kariev" }];
})
Working Demo at Plnkr
Related
I'm trying to get the ng-option to use a JSON formatted array, but not sure why it's not displaying the select option rows. For instance:
index.js:
$scope.seloptions= [{ key: k1, name: n1 },{ key: k2, name: n2 }];
index.html:
<select name="set_aside" ng-model="set_aside" ng-options="option.key for option in seloptions track by name"></select>
I have no idea what I'm doing wrong. The select tag is not getting populated.
EDIT
Also assume that the necessary setup for the angular code is there and both files are in same directory.
The problem is that you are tracking by name which is undefined.
update line :
ng-options="option.key for option in seloptions track by name"
to
ng-options="option.key for option in seloptions track by option.name"
Working example :
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.seloptions= [{ key: "key1", name: "n1" },{ key:" key2", name: "n2" }];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="plunker">
<div ng-controller="MainCtrl">
<select name="set_aside" ng-model="set_aside" ng-options="option.key for option in seloptions track by option.name">
<option value="">Select One</option>
</select>
</div>
</body>
I have a JSON saved that has plenty information:
I am able to fill a select menu with all the names of each element inside the JSON this way:
<select ng-model="car.marca" ng-options="item.brakeId as item.name for item in fillBreaks" class="form-control cforms" required>
<option value="" disabled selected>Sleccionar Marca</option>
</select>
Getting this as result: a select menu filled with the names:
I am able to get the BreakId of the selected element, in this case is saved in 'car.marca' using ng-model.
ng-model="car.marca"
My question is, Based on the selected element lets say 'BrakeId: 9' how can I display the rest of the information of that selected id?
I want to display the price, description, stock, and so on.
You can get the selected object by doing a find on fillBreaks (should be fillBrakes?) for an object with a matching brakeId using ng-change like below. This will allow you to display the additional brake information while keeping car.marca true to holding just a brakeID.
var exampleApp = angular.module('exampleApp', []);
exampleApp.controller('ExampleController', ['$scope', function($scope) {
$scope.car = null;
$scope.fillBreaks = [
{ brakeId: 0, name: 'Brake A', description: 'Good brakes', price: 100, stock: 1 },
{ brakeId: 1, name: 'Brake B', description: 'Great brakes', price: 200, stock: 1 },
{ brakeId: 2, name: 'Brake C', description: 'The best brakes', price: 300, stock: 1 }
];
$scope.brakeInfo = null;
$scope.getBrakeInfo = function(brakeId) {
$scope.brakeInfo = $scope.fillBreaks.find(function(item){return item.brakeId == brakeId});
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="exampleApp" ng-controller="ExampleController">
<select ng-model="car.marca" ng-options="item.brakeId as item.name for item in fillBreaks" ng-change="getBrakeInfo(car.marca)" class="form-control cforms" required>
<option value="" disabled selected>Sleccionar Marca</option>
</select>
<p>{{ brakeInfo }}</p>
</div>
You can change your ng-options to grab the entire selected object, instead of just it's ID.
ng-options="item as item.name for item in ctrl.fillBreaks"
See this JSFiddle for example
P.S. A little trick to remove the Placeholder option from the dropdown is to add style="display: none;" to it, so that it can't be intentionally selected; also illustrated in the JSfiddle
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'm trying to order a table of order details.
The property to order by is selected from a dropdown list in a select tag.
The two properties are order id and product count, which I get from a controller function.
The function:
$scope.countProducts = function(order){
var counter = 0;
order.products.forEach(function(currProd){
counter += currProd.count;
});
return counter;
};
The Id is a numeric variable.
My view :
The details table :
<table>
<thead>
<tr>
<!-- a headline row -->
</tr>
</thead>
<tbody>
<tr ng-repeat="order in orders | orderby: orderByAttr">
<!-- order details rows -->
</tr>
</tbody>
</table>
The select tag with the options:
<select ng-model="orderByAttr">
<option ng-value="order.id">id</option>
<option ng-value="countProducts(order)"> products count </option>
</select>
How can I pass the value of the option to the order by filter?
And how do I bind the countProduct result to the select value?
Change your HTML to this:
<div>
<select ng-model="orderByAttr">
<option ng-value="'id">id</option>
<option ng-value="'productCount'">Product Count</option>
</select>
</div>
<div ng-repeat="order in orders | orderBy: orderByAttr">
<div>
<div>{{order.id}}</div>
</div>
</div>
I'm not sure what your data looks like but I would think it is something similar to this:
$scope.orders = [{
id: 1,
products : [{
productId: 1,
name: 'Okra'
},
{productId: 3,
name: 'Pear'}]
},
{
id: 2,
products : [{
productId: 2,
name: 'Apple'
}]
},
{
id:3,
products: [{
productId: 1,
name: 'Okra'
}
]
}
]
You can use a 'forEach' to get your product count like this: enter code here
angular.forEach($scope.orders, function(value,key){
$scope.orders[key].productCount = value.products.length;
})
Here is a Plunker. Let me know if this is not what you need.
Ther's a problem with your approach: orderByAttr should take a value of an attribute name like id for order id and name if it was an existing attribute for your items. Since the count is a generated attribute I recommend you to use a function for ordering:
$scope.customOrder = function (order) {
if (orderByAttr === 'id') {
return order.id;
} else {
return $scope.countProducts(order);
}
};
And your selection should look like:
<select ng-model="orderByAttr">
<option ng-value="'id'">id</option>
<option ng-value="'count'">products count</option>
</select>
I have an array of objects set up something like this:
$scope.people = [{name:
{last:"Doe", first:"John"}},
{name:
{last:"Smith", first:"Joe"}}];
and I'm trying to do a live filter by text box of last names.
Here's the jsfiddle: http://jsfiddle.net/HB7LU/4287/
Any help would be nice. Thank you!
Edit: sorry I put in the wrong jsfiddle
Taking your fiddle as starting point, I'd say:
HTML
<div ng-controller="MyCtrl">
<input ng-model="search" ng-init="search = ''" placeholder="enter search" />
<div ng-repeat="person in people | filter:{name.last: search}">
{{ person | json }}
</div>
</div>
JS
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.people = [{ name: { last: 'Doe', first: 'John' } },
{ name: { last: 'Smith', first: 'Joe' } }];
}
Here's the plunker http://plnkr.co/edit/W46Fkj
So create a filter!
Building off your existing code:
myApp.filter("search", function() {
return function(people, startPhrase) {
if(!startPhrase) {
return people;
}
var filtered = [];
for(obj in people) {
if(people[obj].name.last.indexOf(startPhrase) == 0) {
filtered.push(people[obj]);
}
}
console.log(filtered);
return filtered;
}
});
Now, you can use a filter called "search" anywhere in the HTML. Call it like this:
<div ng-controller="MyCtrl">
<input ng-model="search.name.last"/>
<div ng-repeat="person in people | search:search.name.last">
{{person.name.last}}, {{person.name.first}}
</div>
</div>