I tried to follow this tutorial, But I can't make it work for multiple md-select. In fact I have a multiple select list of user and i want to have 2 users selected by default.
Is there any solution for achieving that?
You need to track all selected users instead of just one. And remove/add them on the array on demand if needed.
.controller('MyCtrl', function($scope) {
$scope.users = [
{ id: 1, name: 'Bob' },
{ id: 2, name: 'Alice' },
{ id: 3, name: 'Steve' }
];
$scope.selectedUsers = [];
$scope.selectUser = function (id) {
var user = $scope.users.filter(function(user) {
return user.id == id;
})[0];
var idx = $scope.selectedUsers.indexOf(user);
if (idx < 0) {
$scope.selectedUsers.push(user);
} else {
$scope.selectedUsers.splice(idx, 1);
}
}
}
And in the view add multiple and switch to selectedUsers.
<md-select ng-model="selectedUsers" multiple ng-model-options="{trackBy: '$value.id'}">
<md-option ng-value="user" ng-repeat="user in users">{{ user.name }}</md-option>
</md-select>
Codepen: https://codepen.io/kuhnroyal/pen/VWeWaw
This code defines the array of selected objects
$scope.selectedUsers = [];
You can set it by default with some of the users
$scope.selectedUsers =[
{ id: 1, name: 'Bob' },
{ id: 2, name: 'Alice' }
];
This is because ng-model is set with selectedUsers.
If you need more info about NG-MODEL behaviour, take a look here : https://docs.angularjs.org/api/ng/directive/ngModel
You'll also learn more about data-binding in AngularJS.
Furthermore, you will have to update your HTML to allow the md-select to have multiple selected value.
<md-select ng-model="selectedUsers" multiple></md-select>
You'll learn more about it here https://material.angularjs.org/latest/api/directive/mdSelect
Controller:
$scope.users = [
{ id: 1, name: 'Bob' },
{ id: 2, name: 'Alice' },
{ id: 3, name: 'Steve' }
];
$scope.selectedUser =[
{ id: 1, name: 'Bob' },
{ id: 2, name: 'Alice' }
];
View:
<md-select ng-model="selectedUser" ng-model-options="{trackBy: '$value.id'}" multiple>
<md-option ng-value="user" ng-repeat="user in users">{{ user.name }}
</md-option>
</md-select>
Related
In this example the pre defined item not selected by default. Please help to achieve this.
<button ng-click="addRow()">Add Row</button>
<ul>
<li ng-repeat="row in rows">
<select kendo-drop-down-list ng-model="row.selected" ng-init="row.selected = row.choosenItem" ng-options="item.name for item in list | filter:notUsed(row)"></select>
<button ng-click="deleteRow(row)">X</button>
</li>
</ul>
var app = angular.module('plunker', []);
In the data ($scope.rows) item selected in row.choosenItem property. Still the selectbox not filled with choosenItem.
app.controller('MainCtrl', function($scope) {
$scope.list = [{
id: 1,
name: "one"
}, {
id: 2,
name: "Two"
}, {
id: 3,
name: "Three"
}, {
id: 4,
name: "Four"
}, {
id: 5,
name: "Five"
}, {
id: 6,
name: "Six"
}];
$scope.rows = [{
choosenItem: {
id: 2,
name: "Two"
},
label: "row 1",
selected: 2
}, {
choosenItem: {
id: 4,
name: "Four"
},
label: "row 2",
selected: 4
}];
function byID(member) {
return member.choosenItem.id;
}
$scope.notUsed = function(row) {
return function(item) {
return item.id === row.choosenItem.id || !_.indexBy($scope.rows, byID)[item.id];
}
};
$scope.addRow = function addRow() {
$scope.rows.push({
choosenItem: {},
label: "row "+($scope.rows.length+1),
selected: 0
})
};
$scope.deleteRow = function deleteRow(row) {
};
$scope.onSelectChange = function onSelectChange(row){
row.choosenItem = _.findWhere($scope.list, {'id': parseInt(row.selected)});
};
});
Example code here
Basically, when using ngOptions the syntax is value as text for item in array - so keeping that in mind, define your value:
ng-init="row.selected = row.choosenItem.id" ng-options="item.id as item.name for item in list"
I have $scope.selectedUsers set as an array with just 1 object, which is an exact match of one of the objects from my available list of all $scope.users, altho the selected user is not highlighted in my <select multiple...>. Shouldn't it be highlighted?
Js:
$scope.selectedUsers = [
{ id: 2, name: "Jenny" }
];
$scope.users = [
{ id: 1, name: "Frank" },
{ id: 2, name: "Jenny" }
];
Html:
<select multiple ng-model="selectedUsers" ng-options="user as user.name for user in users"></select>
Live demo: http://plnkr.co/edit/wpfvhvuShFVE07cyBE6M?p=preview
which is an exact match of one of the objects from my available list of all $scope.users
No, they are not the same even though both objects has similar key-values. Angular uses strict comparison of objects (===) and two objects are equal only if they are the same object (references the same object).
Correct code in your case:
$scope.users = [
{ id: 1, name: "Frank" },
{ id: 2, name: "Jenny" }
];
$scope.selectedUsers = [
$scope.users[1]
];
Demo: http://plnkr.co/edit/Czb7JuUzl7dPa08gsqUD?p=preview
Usually, an item is removed from the list of selectable items, after being selected.
But, when I refresh the underlying list of items, the (already) selected items, are selectable too!
How can i avoid this?
My view looks like this:
<div ng-controller="MyCtrl" ng-init=buildList()>
<button ng-click="buildList()">Refresh list</button>
<select multiple ui-select2 data-ng-model="selectedDaltons">
<option data-ng-repeat="dalton in daltons" value="{{dalton.id}}">
{{dalton.name}}
</option>
</select>
</div>
My controller:
function MyCtrl($scope) {
// Averell is preselected (id:4)
$scope.selectedDaltons = [4];
// $scope.daltons is iterated in ng-repeat
// its initially called in ng-init
$scope.buildList = function() {
$scope.daltons = [
{ id: 1, name: 'Joe' },
{ id: 2, name: 'William' },
{ id: 3, name: 'Jack' },
{ id: 4, name: 'Averell' },
{ id: 5, name: 'Ma' }
];
};
};
Here it is as a jsfiddle.
Actually I think I found an solution (to my own question):
Based on the controller of the original question, change the array, before replacing it:
function MyCtrl($scope) {
// Averell is preselected (id:4)
$scope.selectedDaltons = [4];
// $scope.daltons is iterated in ng-repeat
// its initially called in ng-init
$scope.buildList = function() {
// touch array before renewal!!
if (angular.isArray($scope.daltons)) {
$scope.daltons.pop();
}
$scope.daltons = [
{ id: 1, name: 'Joe' },
{ id: 2, name: 'William' },
{ id: 3, name: 'Jack' },
{ id: 4, name: 'Averell' },
{ id: 5, name: 'Ma' }
];
};
};
Here the updated jsfiddle.
$scope.activities =
[
{ id: 1, type: "DROPDOWN_MENU", name: "Dropdown Menu" },
{ id: 2, type: "HORIZONTAL_BAR", name: "Horizontal Bar" }
];
<select data-ng-model="engineer.currentActivity" data-ng-options="a.name for a in activities">
</select>
Using the above I am able to create a select box with 3 values, a blank one and then dropdown menu and horizontal bar.
I would like to set Horizontal Bar as my default and cannot see how to do this.
Help would be great
In the controller, just add a line to setup the initial selection:
$scope.activities =
[
{ id: 1, type: "DROPDOWN_MENU", name: "Dropdown Menu" },
{ id: 2, type: "HORIZONTAL_BAR", name: "Horizontal Bar" }
];
$scope.engineer = {}; // if needed
$scope.engineer.currentActivity = $scope.activities[1];
In your angular controller:
$scope.activities = [
{ id: 1, type: "DROPDOWN_MENU", name: "Dropdown Menu" },
{ id: 2, type: "HORIZONTAL_BAR", name: "Horizontal Bar" }
];
$scope.activity = $scope.activities[1]; //Bind 2nd activity to the model.
In the HTML:
<select ng-model="activity"
ng-options="activity as activity.name for activity in activities">
<option value=""></option>
</select>
See the Fiddle
Use ng-init directive
ng-init="engineer.currentActivity = options[1]"
I am trying to show a select box inside a ng-repeat and am stuck with the following:
<tr ng-repeat="element in elements" post-repeat-directive>
<td>{{element.name}}</td>
<td>
<select ng-model="element.type"
ng-options="item.id as item.name for item in tipo_items"></select>
</select>
</td>
</tr>
In my controller I have:
$scope.tipo_items = [
{ id: 1, name: 'uno' },
{ id: 2, name: 'dos' },
{ id: 3, name: 'tres' },
{ id: 4, name: 'cuatro' },
{ id: 5, name: 'cinco' },
];
This shows the select items, but no item is pre-selected!
I checked the element.type values and they are correct...
What am I doing wrong?
According to the comprehension expression you defined in the select, you need to use the id value to preselect the item and set it for the model object.
$scope.element = {};
$scope.element.type = $scope.tipo_items[0].id;
DEMO
OK I found the problem...
I was loading the id from the database as json, and the id was a string, not an integer...
this solved the problem:
$scope.tipo_items = [
{ id: '1', name: 'uno' },
...
instead of
$scope.tipo_items = [
{ id: 1, name: 'uno' },
...
This is default behavior by angular select directive. If you'll set ng-model to a default in the ctrl you'll get it preselected.
something like (in the ctrl):
$scope.element.name = $scope.tipo_items[0]