So I have this array people
people = [{name: "John",hair: false},{name: "James": hair: false}]
I have a select element with the multiple attribute that is populated from
<select ng-model="people" multiple
ng-options="person.hair as person.name for person in people">
</select>
What I'm trying to achieve is when the user selects one or more items from this select element it will set the hair property of the selected item(s) to true.
Now what's happening is I select an item and it sets people to false, which makes sense. The select needs an ng-model for ng-options to work. If I set it to something else nothing gets changed on people
I've tried putting a function in ng-change and throwing the ng-model I set to it but that won't make the selection 'highlighted' in the select multiple element. I know there are more practical ways to do this but I'd like to figure out how to use the select multiple if I could.
Here's one way to do it:
<select ng-model="hairyPersons" multiple
ng-change="updatePeople(hairyPersons)"
ng-options="person as person.name for person in people">
</select>
$scope.updatePeople = function(selects) {
$scope.people.forEach(x => x.hair=false);
selects.forEach(x => x.hair=true);
};
The ng-model variable needs to be different than the ng-options array.
The DEMO
angular.module("app",[])
.controller("ctrl", function($scope) {
$scope.people = [
{name: "John", hair: false},
{name: "James", hair: false},
{name: "Mary", hair: false},
{name: "Fred", hair: false},
];
$scope.updatePeople = function(selects) {
$scope.people.forEach(x => x.hair=false);
selects.forEach(x => x.hair=true);
};
})
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="ctrl">
<select ng-model="hairyPersons" multiple
ng-change="updatePeople(hairyPersons)"
ng-options="person as person.name for person in people">
</select>
<div ng-repeat="p in people">
{{p.name}} hair={{p.hair?'TRUE':false}}
</div>
<h3>hairyPersons</h3>
<ol>
<li ng-repeat="h in hairyPersons">{{h.name}}</li>
</ol>
</body>
Another way to do it is with a list of checkboxes:
<div ng-repeat="p in people">
<input type="checkbox" ng-model="p.hair">{{p.name}}<br>
</div>
The ng-model directives operate directly on objects in the people array.
All the unchecked boxes set hair: false; all the checked boxes set hair: true on their respective objects.
Related
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'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
i am seeing the example here https://docs.angularjs.org/api/ng/directive/select and this have 3 select with the same value, how can i have different values selected in my options?
i have this:
<li ng-repeat="tarea in tareas">
<input type="checkbox" ng-model="tarea.COMPLETADA" ng-change="updTarea(tarea.ID)"/>
<span class="done-{{tarea.COMPLETADA}}" >{{tarea.NAME}} {{tarea.CLASIFICADORES}}</span>
<select ng-model="selectedOpt"
ng-options="clasificador.NAME for clasificador in clasificadores">
</select>
<button class="buttons delete right" ng-click="delTarea(tarea.ID)"> Eliminar</button>
</li>
so i can have 5,10,15 options, and i want to make a selected item with the value that i have in tarea.CLASIFICADORES, i tried with this
$scope.selectedOpt = $scope.clasificadores[1]
but that make all the options with the same value, like in the example...
how can i make different selected item in my options dynamically with a value i have in my ng-repeat in every item?
i load the data with ajax...
my problem is to set the default selected item with the tarea.CLASIFICADORES. for example, i have a todo list that have a classifier, i want my ng-options to select by default my database value clasifier when the page is load
The problem is, that you are using the same scope variable for all selections. You could store the selected options in an array too like this:
function TestCtrl($scope) {
$scope.items = [
{ id: 1, class: 1 },
{ id: 2, class: 2 },
{ id: 3, class: 1 },
];
$scope.classes = [
{ name: "class 1", id: 1},
{ name: "class 2", id: 2},
{ name: "class 3", id: 3}
];
};
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<div ng-controller="TestCtrl">
<div ng-repeat="currentItem in items">
<select ng-model="selectedClass[$index]" ng-init="selectedClass[$index]=(classes|filter:{id: currentItem.class})[0]" ng-options="class.name for class in classes track by class.id" >
</select>
selected class: {{selectedClass[$index]}}
</div>
</div>
</div>
In this example I take use of the variable $index, which is set by the ng-repeat directive. As the name suggests it contains the current index of the repeat-loop.
UPDATE
I updated the code-snippet so it sets the default value for each select input.
The different items now contain a field with the id of the corresponding class. I initialize the select input with ng-init. With this directive I set selectedClass[$index] which is the selected value for the current item. As we only have the class-id as a property of the items I use a filter to find the corresponding class object with the id (classes|filter:{id: currentItem.class})[0]
To get rid of the filter you could just set the class of each item to the full class-object instead of the id.
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.