How can i filter the second combobox choices based on what i select on first combobox?
So here is the controller... and the view file.
<body ng-app="myApp" ng-controller="myCtrl">
<section class="mainbar">
<section class="matter">
<div class="container">
<h2></h2>
<div class="row">
<div class="widget wblue">
<div class="widget-content user">
</div>
<div class="widget-foot">
<div class="clearfix"></div>
</div>
</div>
</div>
<div>
<select ng-model="pSelected" ng-options="p.id as p.name for p in tier"></select>
<select ng-model="cSelected"
ng-options="c.name for c in cd"></select>
<label><input type="checkbox" </label>
</div>
</div>
</section>
</section>
</body>
and a simple JS
angular.module('myApp', []).
controller('myCtrl', function myCtrl($scope){
$scope.tier = [
{ id: 1, name: 'Tier1Head' },
{ id: 2, name: 'Tier2Head' },
{ id: 3, name: 'Tier3Head' }
];
$scope.cd = [
{ id: 1, idP: 1, name: 'Tier1' },
{ id: 2, idP: 1, name: 'Tier1' },
{ id: 3, idP: 1, name: 'Tier1' },
{ id: 4, idP: 2, name: 'Tier2' },
{ id: 5, idP: 2, name: 'Tier2' },
{ id: 6, idP: 3, name: 'Tier3' },
{ id: 7, idP: 3, name: 'Tier3' }
];
})
And when i click the checkbox.. i need first combobox to be disabled(so i can't select other Parinte)
You can filter results with pipe to filter
and use ng-disabled for select (i had a plnkr for you but it there is something wrong with plnkr functionality at this moment
so here is a HTML, i've change models for selects as well as extended their functionality
<body ng-app="myApp" ng-controller="myCtrl">
<section class="mainbar">
<section class="matter">
<div class="container">
<h2></h2>
<div class="row">
<div class="widget wblue">
<div class="widget-content user">
</div>
<div class="widget-foot">
<div class="clearfix"></div>
</div>
</div>
</div>
<div>
<select ng-model="pSelected" ng-options="p.id as p.name for p in tier"
ng-disabled="tierdisable"></select>
<select ng-model="cSelected"
ng-options="c.name for c in cd | filter:{idP:pSelected}:true "></select>
<label><input type="checkbox" ng-model="tierdisable">Disable</label>
</div>
</div>
</section>
</section>
</body>
and a simple JS
angular.module('myApp', []).
controller('myCtrl', function myCtrl($scope){
$scope.tier = [
{ id: 1, name: 'Tier1Head' },
{ id: 2, name: 'Tier2Head' },
{ id: 3, name: 'Tier3Head' }
];
$scope.cd = [
{ id: 1, idP: 1, name: 'Tier1' },
{ id: 2, idP: 1, name: 'Tier1' },
{ id: 3, idP: 1, name: 'Tier1' },
{ id: 4, idP: 2, name: 'Tier2' },
{ id: 5, idP: 2, name: 'Tier2' },
{ id: 6, idP: 3, name: 'Tier3' },
{ id: 7, idP: 3, name: 'Tier3' }
];
})
disabled :
<div>
Parinti:
<select ng-model="vm.parinti" ng-options="parinte.nume for parinte in vm.parinti" ng-disabled="checked"></select>
Copii:
<select ng-model="vm.copii" ng-options="copil.nume for copil in vm.copii "></select>
Blocat:
<input type="checkbox" ng-model="checked">
</div>
Related
hello everyone I have a problem I want to change the value of type in ng-repeat
here is the simple example to explain what I want to say
let arr =
[
{school_id: 1, name: "jon"},
{school_id: 2, name: "sam"},
{school_id: 1, name: "sara"},
{school_id: 2, name: "youfiy"}
]
<ul>
<li ng-repeat="arr">arr.school_id</li> <!-- here shuld print school name instide of schoolid -->
</ul>
I need in id 1 change school_id to "primarySchool" and in id 2 change to "hightSchool" and so on
Use ng-switch and add your condition as you need,
var app = angular.module('test',[]);
app.controller('testCtrl',function($scope){
$scope.arr =
[
{school_id: 1, name: "jon"},
{school_id: 2, name: "sam"},
{school_id: 1, name: "sara"},
{school_id: 2, name: "youfiy"}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="test" ng-controller="testCtrl">
<ul>
<li ng-repeat="schooldObj in arr">
<div ng-switch on="schooldObj.school_id">
<div ng-switch-when="1">
PrimarySchool
</div>
<div ng-switch-default>
hightSchool
</div>
</div>
</ul>
</body>
$scope.arr =
[
{school_id: 1, name: "jon"},
{school_id: 2, name: "sam"},
{school_id: 1, name: "sara"},
{school_id: 2, name: "youfiy"}
]
//then there we are using ng-repeat with ng-if
<ul>
<li ng-repeat="schoolidobj in arr">
//here if school_id is 1 then this condition is executed
<div ng-if="schoolidobj.school_id == '1' ">
primarySchool
</div>
//here if school_id is 2 then this condition is executed
<div ng-if="schoolidobj.school_id == '2' ">
highSchool
</div>
</li>
</ul>
You need some kind of IF statement, I suggest a simple ternary operator for ID 1 and 2 as your only choices. Here is what it will look like:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.arr = [{
school_id: 1,
name: "jon"
},
{
school_id: 2,
name: "sam"
},
{
school_id: 1,
name: "sara"
},
{
school_id: 2,
name: "youfiy"
}
]
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="school in arr">
{{ "test/" + ((school.school_id==1) ? "primarySchool" : "hightSchool") + "&" + school.name}}
</li>
</ul>
</div>
</body>
</html>
Even better: just call a function that will return a string that you need. You can have as many if statements inside it, feel free to expand it with any logic.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.arr = [{
school_id: 1,
name: "jon"
},
{
school_id: 2,
name: "sam"
},
{
school_id: 1,
name: "sara"
},
{
school_id: 2,
name: "youfiy"
}
]
$scope.getURL = function(school) {
var s = "";
if (school.school_id == 1) {
s = "primarySchool";
} else if (school.school_id == 2) {
s = "hightSchool";
}
return "test/" + s + "&" + school.name;
}
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="school in arr">
{{ getURL(school) }}
</li>
</ul>
</div>
</body>
</html>
I have a select element that is repeated by a ng-repeat directive when the "Addbutton" clicked . the object that fills the select element has a format like this :
{ id: 1, Title: 'AAA', priority: 1 },
I want when user selects an option from this combo box and clicks on the "Addbutton",
in the next row only options that have priority greater than the previous selected item priority would be list and shown .
This is my code :
<!DOCTYPE html>
<html ng-app="mainApplication">
<head>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script>
var MainApplication = angular.module('mainApplication', []);
MainApplication.controller('mainController', ['$scope', function ($scope)
{
$scope.AddressPrefix = [
{ id: 1, Title: 'AAA', priority: 1 },
{ id: 1, Title: 'BBB', priority: 2 },
{ id: 1, Title: 'CCC', priority: 3 },
{ id: 1, Title: 'DDD', priority: 4 },
{ id: 1, Title: 'EEE', priority: 5 },
{ id: 1, Title: 'FFF', priority: 6 },
{ id: 1, Title: 'GGG', priority: 7 },
{ id: 1, Title: 'HHH', priority: 8 },
{ id: 1, Title: 'III', priority: 2 },
{ id: 1, Title: 'jjj', priority: 2 },
{ id: 1, Title: 'kkk', priority: 2 },
{ id: 1, Title: 'LLL', priority: 10 },
{ id: 1, Title: 'MMM', priority: 9 },
{ id: 1, Title: 'ooo', priority: 7 },
{ id: 1, Title: 'PPP', priority: 12 },
{ id: 1, Title: 'qqq', priority: 3 },
{ id: 1, Title: 'RRR', priority: 13 },
{ id: 1, Title: 'zzz', priority: 14 },
];
$scope.AddressControls = [{ id: 1 }];
$scope.btnAddressAdd_click = function () {
var newItemNo = $scope.AddressControls.length + 1
$scope.AddressControls.push({ 'id': newItemNo });
};
$scope.btnAddressRemove_click = function () {
var lastItem = $scope.AddressControls.length - 1
$scope.AddressControls.splice(lastItem);
};
}]);
</script>
</head>
<body dir="rtl" ng-controller="mainController">
<div class="row" >
<div class="col-sm-6">
<button type="button" id="btnAddressAdd" class="btn btn-primary" ng-click="btnAddressAdd_click()">
<span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true" style="font-size:1.2em"></span>
</button>
<button type="button" id="btnAddressRemove" class="btn btn-danger" ng-click="btnAddressRemove_click()" ng-disabled="AddressControls.length==1">
<span class="glyphicon glyphicon-minus" aria-hidden="true" style="font-size:1.2em"></span>
</button>
</div>
</div>
<hr />
<fieldset class="row " id="Address" ng-repeat="item in AddressControls" ng-disabled="$first">
<div class="col-sm-1" >
<div class="form-group">
<label >
prefix
</label>
</div>
</div>
<div class="col-sm-3" >
<div class="form-group">
<span></span>
<select class="form-control" ng-model="prefixSelecteditem" ng-options="prefix.Title for prefix in AddressPrefix">
<option value="">--select option--</option>
</select>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<div class="errorBlock">
</div>
<input class="form-control" type="text" value="" style="height:32px">
</div>
</div>
</fieldset>
</body>
</html>
link of source code in codepen
Edit
I have some ideas how to to do it when "Addbutton" clicked but I am wondering how its possible to achieve this functionality when there are some active combo boxes and user selects or changes the option of one of them.
There is many approaches to achieve this. here is two of them:
Method 1: Using Angular Filter In HTML
var MainApplication = angular.module('mainApplication', []);
MainApplication.controller('mainController', ['$scope', function($scope) {
$scope.AddressPrefix = [{
id: 1,
Title: 'AAA',
priority: 1
}, {
id: 1,
Title: 'BBB',
priority: 2
}, {
id: 1,
Title: 'CCC',
priority: 3
}, {
id: 1,
Title: 'DDD',
priority: 4
}, {
id: 1,
Title: 'EEE',
priority: 5
}, {
id: 1,
Title: 'FFF',
priority: 6
}, {
id: 1,
Title: 'GGG',
priority: 7
}, {
id: 1,
Title: 'HHH',
priority: 8
}, {
id: 1,
Title: 'III',
priority: 2
}, {
id: 1,
Title: 'jjj',
priority: 2
}, {
id: 1,
Title: 'kkk',
priority: 2
}, {
id: 1,
Title: 'LLL',
priority: 10
}, {
id: 1,
Title: 'MMM',
priority: 9
}, {
id: 1,
Title: 'ooo',
priority: 7
}, {
id: 1,
Title: 'PPP',
priority: 12
}, {
id: 1,
Title: 'qqq',
priority: 3
}, {
id: 1,
Title: 'RRR',
priority: 13
}, {
id: 1,
Title: 'zzz',
priority: 14
}, ];
$scope.AddressControls = [{
id: 1
}];
$scope.btnAddressAdd_click = function() {
var newItemNo = $scope.AddressControls.length + 1
$scope.AddressControls.push({
'id': newItemNo
});
};
$scope.btnAddressRemove_click = function() {
$scope.AddressControls.pop();
};
$scope.myFilter = function(index) {
return function(option, optionIndex, allOptions) {
var lastSelectedOption = (index > 0) && $scope.AddressControls[index - 1] && $scope.AddressControls[index - 1].prefixSelecteditem;
if (!lastSelectedOption) return true;
return option.priority > lastSelectedOption.priority;
}
}
}]);
<html ng-app="mainApplication">
<head>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body dir="rtl" ng-controller="mainController">
<div class="row">
<div class="col-sm-6">
<button type="button" id="btnAddressAdd" class="btn btn-primary" ng-click="btnAddressAdd_click()">
<span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true" style="font-size:1.2em"></span>
</button>
<button type="button" id="btnAddressRemove" class="btn btn-danger" ng-click="btnAddressRemove_click()" ng-disabled="AddressControls.length==1">
<span class="glyphicon glyphicon-minus" aria-hidden="true" style="font-size:1.2em"></span>
</button>
</div>
</div>
<hr />
<fieldset class="row " id="Address" ng-repeat="item in AddressControls track by $index" ng-disabled="$first">
<div class="col-sm-1">
<div class="form-group">
<label>
prefix
</label>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<span></span>
<select class="form-control" ng-model="item.prefixSelecteditem" ng-options="prefix.Title for prefix in AddressPrefix | filter: myFilter($index)">
<option value="">--select option--</option>
</select>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<div class="errorBlock">
</div>
<input class="form-control" type="text" value="" style="height:32px">
</div>
</div>
</fieldset>
</body>
</html>
Method 1 CodePen
Method 2: Using Angular Filter In Controller
var MainApplication = angular.module('mainApplication', []);
MainApplication.controller('mainController', ['$scope', function($scope) {
$scope.AddressPrefix = [{
id: 1,
Title: 'AAA',
priority: 1
}, {
id: 1,
Title: 'BBB',
priority: 2
}, {
id: 1,
Title: 'CCC',
priority: 3
}, {
id: 1,
Title: 'DDD',
priority: 4
}, {
id: 1,
Title: 'EEE',
priority: 5
}, {
id: 1,
Title: 'FFF',
priority: 6
}, {
id: 1,
Title: 'GGG',
priority: 7
}, {
id: 1,
Title: 'HHH',
priority: 8
}, {
id: 1,
Title: 'III',
priority: 2
}, {
id: 1,
Title: 'jjj',
priority: 2
}, {
id: 1,
Title: 'kkk',
priority: 2
}, {
id: 1,
Title: 'LLL',
priority: 10
}, {
id: 1,
Title: 'MMM',
priority: 9
}, {
id: 1,
Title: 'ooo',
priority: 7
}, {
id: 1,
Title: 'PPP',
priority: 12
}, {
id: 1,
Title: 'qqq',
priority: 3
}, {
id: 1,
Title: 'RRR',
priority: 13
}, {
id: 1,
Title: 'zzz',
priority: 14
}, ];
$scope.AddressControls = [{
id: 1
}];
$scope.btnAddressAdd_click = function() {
var newItemNo = $scope.AddressControls.length + 1
$scope.AddressControls.push({
'id': newItemNo
});
};
$scope.btnAddressRemove_click = function() {
$scope.AddressControls.pop();
};
$scope.myFilter = function(arr, index) {
var lastSelectedOption = (index > 0) && $scope.AddressControls[index - 1] && $scope.AddressControls[index - 1].prefixSelecteditem;
if (!lastSelectedOption) return arr;
return arr.filter(function (option) {
return option.priority > lastSelectedOption.priority;
});
}
}]);
<html ng-app="mainApplication">
<head>
<title></title>
<meta charset="utf-8" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
</head>
<body dir="rtl" ng-controller="mainController">
<div class="row">
<div class="col-sm-6">
<button type="button" id="btnAddressAdd" class="btn btn-primary" ng-click="btnAddressAdd_click()">
<span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true" style="font-size:1.2em"></span>
</button>
<button type="button" id="btnAddressRemove" class="btn btn-danger" ng-click="btnAddressRemove_click()" ng-disabled="AddressControls.length==1">
<span class="glyphicon glyphicon-minus" aria-hidden="true" style="font-size:1.2em"></span>
</button>
</div>
</div>
<hr />
<fieldset class="row " id="Address" ng-repeat="item in AddressControls track by $index" ng-disabled="$first">
<div class="col-sm-1">
<div class="form-group">
<label>
prefix
</label>
</div>
</div>
<div class="col-sm-3">
<div class="form-group">
<span></span>
<select class="form-control" ng-model="item.prefixSelecteditem" ng-options="prefix.Title for prefix in myFilter(AddressPrefix, $index)">
<option value="">--select option--</option>
</select>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<div class="errorBlock">
</div>
<input class="form-control" type="text" value="" style="height:32px">
</div>
</div>
</fieldset>
</body>
</html>
Method 2 CodePen
In first one we use angular filter to filter the options array, and in the second, we simply pass our array to a function in controller and return just the options we needed to show.
I think the first method is the better way, but the second one is simpler and easier to understand!
Edit:
The solution for your Edit session is here!
I have multiple tabs and each is having angular ui-grid inside it. Each grid should display different data. But i'm facing problem like in one tab data is coming in the grid on page load but in another tab ui-grid itself is not loading. Not getting what is the problem. Please help.
Below is the sample of the code:
<uib-tabset class="nav">
<uib-tab heading="User">
<div ng-include="'./public/partials/tabs/user.html'">
</div>
</uib-tab>
<uib-tab heading="Notes">
<div ng-include="'./public/partials/tabs/notifications.html'">
</div>
</uib-tab>
<uib-tab heading="Assets">
<div ng-include="'./public/partials/tabs/assetsList.html'"></div>
</uib-tab>
<uib-tab heading="Audit Logs">
<div ng-include="'./public/partials/tabs/audit.html'" >
</div>
</uib-tab>
</uib-tabset>
Html for tabs:
<div class="container-fluid">
<form name="assetsForm" novalidate class="form-horizontal">
<div class='container-fluid containerborder'>
<br>
<!--creating table-->
<div data-ui-grid="assetsOptions" data-ui-grid-pagination></div>
</div>
</form>
</div>
<div class="container-fluid">
<form name="userForm" novalidate class="form-horizontal">
<div class='container-fluid containerborder'>
<br>
<!--creating table-->
<div data-ui-grid="userOptions" data-ui-grid-pagination></div>
</div>
</form>
</div>
Controller part:
$scope.data = [
{ name: 'Alex', car: 'Toyota' },
{ name: 'Sam', car: 'Lexus' },
{ name: 'Joe', car: 'Dodge' },
{ name: 'Bob', car: 'Buick' },
{ name: 'Cindy', car: 'Ford' },
];
$scope.userOptions = {
data: 'data',
paginationPageSizes: [5, 10, 25],
paginationPageSize: 5,
columnDefs: [
{name: 'name'},
{name: 'car'}
]
};
$scope.assetsData = [
{ table: 'Brian', class: 'Audi' },
{ table: 'Malcom', class: 'Mercedes Benz' },
{ table: 'Dave', class: 'Ford' },
{ table: 'Stacey', class: 'Audi' },
{ table: 'Amy', class: 'Acura' },
{ table: 'Scott', class: 'Toyota' },
{ table: 'Ryan', class: 'BMW' },
];
$scope.assetsOptions = {
data: 'data',
paginationPageSizes: [5, 10, 25],
paginationPageSize: 5,
columnDefs: [
{name: 'table'},
{name: 'class'}
]
};
If one grid is loading on page load and others are not, it basically means A) other tabs are not initialized on page load B) grid initializing code should be in tab switch instead of page load C) file or data is not available at specified location.
I hope this will help.
Output should be
Name : AAA, Type: Flower
Name : BBB, Type: Bird
Controller
function myCtrl($scope) {
$scope.items = [
{id: 0, name: 'AAA', type: 12},
{id: 1, name: 'BBB', type: 33}];
$scope.types = [
{id: 0, name: 'Dog'},
{id: 12, name: 'Flower'},
{id: 24, name: 'Fish'},
{id: 33, name: 'Bird'}];
}
HTML
<div ng-app>
<div ng-controller="myCtrl">
<div ng-repeat="item in items">
Name : {{ item.name }}, Type: {{ ??? }}
</div>
</div>
</div>
How can I retrieve a matching element in $scope.types by 'item.type'?
Your controller should be:
angular.module('myApp', []).controller('myCtrl', myCtrl);
function myCtrl($scope) {
$scope.items = [
{id: 0, name: 'AAA', type: 12},
{id: 1, name: 'BBB', type: 33}];
$scope.types = [
{id: 0, name: 'Dog'},
{id: 12, name: 'Flower'},
{id: 24, name: 'Fish'},
{id: 33, name: 'Bird'}];
$scope.getType = function(id){
return $scope.types.filter(function(item){
return (item.id === id);
})[0].name;
}
}
And template:
<div ng-app='myApp'>
<div ng-controller="myCtrl">
<div ng-repeat="item in items">
Name : {{ item.name }}, Type: {{ getType(item.type) }}
</div>
</div>
</div>
I worked here: http://jsfiddle.net/f9019o5k/2/
Write and function in your controller which will return the required type. Doing entire thing in HTML might make it unreadable and complex
$scope.getType(id){
return $scope.items.filter(function(item){
item.id === id;
});
}
And call it in your HTML as
<div ng-app>
<div ng-controller="myCtrl">
<div ng-repeat="item in items">
Name : {{ item.name }}, Type: {{ getType(item.id) }}
</div>
</div>
</div>
Its too simple if we Use angular filters to achieve this.
app.filter('myFilter ', function() {
return function(input,obj) {
angular.forEach(obj,function(val){
if(val.id == input)
{
return val.name;
}
})
};
});
Html
<div ng-app>
<div ng-controller="myCtrl">
<div ng-repeat="item in items">
Name : {{ item.name }}, Type: {{ item.type | myFilter:types }}
</div>
</div>
</div>
Simple problem, probably discussed many times, but I can't find a proper solution on this simple issue.
The problem:
Why are the Daltons selectable, but the selected Daltons don't show up in the select-element?
Controller:
var myApp = angular.module('myApp', ['ui.select2']);
function MyCtrl($scope) {
$scope.daltons = [
{ id: 10, name: 'Joe' },
{ id: 20, name: 'William' },
{ id: 30, name: 'Jack' },
{ id: 40, name: 'Averell' },
{ id: 50, name: 'Ma' }
];
$scope.selectedDaltons = [40]; // Averell is preselected
};
View:
<div ng-controller="MyCtrl">
<label for="1">Please select items:</label>
<select id="1"
ui-select2
multiple
ng-model='selectedDaltons'
ng-options="dalton.id as dalton.name for dalton in daltons">
</select>
<label for="2">Selected Items:</label>
<ul id="2">
<li ng-repeat="dalton in selectedDaltons">{{dalton}}</li>
</ul>
</div>
Here it is as a jsfiddle
I think the issue is that ng-options is not supported in ui-select2. I reworked your fiddle using the option tag with an ng-repeat:
http://jsfiddle.net/u48j0yyc/1/
<div ng-controller="MyCtrl">
<label>Please select items:</label>
<select ui-select2 multiple ng-model='selectedDaltons'>
<option ng-repeat="d in daltons" ng-bind="d.name" value="{{ d.id }}"></option>
</select>
<label>Selected Items:</label>
<ul>
<div ng-bind="selectedDaltons"></div>
</ul>
</div>
var myApp = angular.module('myApp', ['ui.select2']);
function MyCtrl($scope) {
$scope.daltons = [
{ id: 10, name: 'Joe' },
{ id: 20, name: 'William' },
{ id: 30, name: 'Jack' },
{ id: 40, name: 'Averell' },
{ id: 50, name: 'Ma' }
];
$scope.selectedDaltons = [40]; // Averell is preselected
};