item selected and selectable in ui-select2 - angularjs

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.

Related

pre-fill select box using angularjs

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"

Angular multiple select not preselecting for non-empty ng-model

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

How to select multiple selected value from select option

My controller code looks like
$scope.items = [{
heading: 'Sports',
types: [{
name: 'Football',
}, {
name: 'Persie',
}, {
name: 'Ronaldo',
}, {
name: 'Messy',
}],
id: '1'
}, {
heading: 'Cricket',
types: [{
name: 'Tendulkar',
}, {
name: 'Lara',
}, {
name: 'Ponting',
}],
id: '2'
}];
My view contains something like this :
How can I get the selected values of options when user clicks submit button
Here is the jsfiddle
I used ng-repeat to build the select and ng-options to fill them, you then have to use the relative ng-model to get the selections.
HTML:
<div ng-app ng-controller="MyCtrl">
<select class="select fancy" ng-repeat="(i, item) in items" ng-model="searchOption[i]" ng-options="type.name for type in item.types"></select>
<button ng-click="submitIt()">Submit</button>
</div>
Javascript:
function MyCtrl($scope) {
$scope.submitIt = function () {
console.log($scope.searchOption);
};
$scope.searchOption = [];
$scope.items = [{
heading: 'Sports',
types: [{
name: 'Football',
}, {
name: 'Persie',
}, {
name: 'Ronaldo',
}, {
name: 'Messy',
}],
id: '1'
}, {
heading: 'Cricket',
types: [{
name: 'Tendulkar',
}, {
name: 'Lara',
}, {
name: 'Ponting',
}],
id: '2'
}];
}

Angular custom filter into javascript only

I have some checkboxes and a list. I have made a custom filter to filter the results of that list according to the checkbox that is selected.
The problem is that I plan to have quite a lot of these checkboxes filtering the results so I would like to move all aspects of the filtering into the javascript. I have seen that this is possible by adding it into the controller but I have not been able to. Could someone point me in the right direction?
Here is the fiddle: http://jsfiddle.net/webgremlin/qpyngzu8/
html
<div ng-app="someApp">
<div ng-controller="checkboxCtrl">
<label ng-repeat="tree in trees">
{{ tree.name }}
<input type="checkbox" ng-model="tree.selected"/>
</label>
</div>
<hr />
<div ng-controller="listCtrl">
<ul>
<li ng-repeat="item in listItems | filterByCategory : trees">
{{ item.name }}
</li>
</ul>
</div>
</div>
js
var someApp = angular.module('someApp', []);
someApp.factory('checkboxFactory', function() {
var checkboxFactory = [
{ name: 'item 1', item: 1 },
{ name: 'item 2', item: 2 },
{ name: 'item 3', item: 3 }
];
return checkboxFactory;
});
someApp.factory('listFactory', function() {
var listFactory = [
{ name: 'list item 01', item: 1 },
{ name: 'list item 02', item: 2 },
{ name: 'list item 03', item: 3 },
{ name: 'list item 04', item: 1 },
{ name: 'list item 05', item: 2 },
{ name: 'list item 06', item: 3 },
{ name: 'list item 07', item: 1 },
{ name: 'list item 08', item: 2 },
{ name: 'list item 09', item: 3 },
{ name: 'list item 10', item: 1 }
];
return listFactory;
});
someApp.filter('filterByCategory', function() {
return function(input, trees) {
console.log(input, trees);
var ret =[];
for (var i in input){
var match = false;
for (var j in trees){
if (trees[j].selected && trees[j].item == input[i].item){
ret.push(input[i]);
}
}
}
if (ret.length > 0){
return ret;
} else {
return input;
}
};
})
someApp.controller('checkboxCtrl', ['$scope','checkboxFactory',
function($scope, checkboxFactory) {
$scope.trees = checkboxFactory;
}]);
someApp.controller('listCtrl', ['$scope','checkboxFactory','listFactory',
function($scope, checkboxFactory,listFactory) {
$scope.trees = checkboxFactory;
$scope.listItems = listFactory;
console.log($scope.listItems);
}]);
You can do that. Just use the $filter provider to look up your filterByCategory filter in your controller and apply it that way:
Fiddle here:
http://jsfiddle.net/smaye81/gp4qg257/2/

AngularJS ng-repeat setting default select value

$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]"

Resources