This is my HTML part
<select size="3" name="selectedSaleStatus[]" multiple ng-model="selectedSaleStatus" ng-options="type.name for type in config.saleStatus" >
</select>
Its my Controller
$scope.saleStatus = [
{'id': 18, 'name': 'ABC'},
{'id': 19, 'name': 'DEF'},
{'id': 20, 'name': 'GHI'}
];
I want my default selected item as ABC
Use http://mgcrea.github.io/angular-strap/#/selects
<button id="saleItems" type="button" placeholder="choose" ng-model="selectedSaleStatus"
bs-select data-multiple="1" max-length-html="choosed" bs-options="x.id as x.name for x in saleStatus">
</button>
And in controller
$scope.selectedSaleStatus = [18];
function testcontroller($scope, $filter) {
$scope.saleStatus = [{
'id': 18,
'name': 'ABC',
'val': true
},
{
'id': 19,
'name': 'DEF',
'val': false
},
{
'id': 20,
'name': 'GHI',
'val': false
}
];
$scope.selected = [{
id: 18,
name: "ABC"
}];
$scope.selectedValues = [];
$scope.$watch('selected', function(nowSelected) {
$scope.selectedValues = [];
if (!nowSelected) {
return;
}
angular.forEach(nowSelected, function(val) {
$scope.selectedValues.push(val.id.toString());
});
});
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<body ng-app ng-controller="testcontroller">
<select multiple ng-model="sales">
<option ng-selected="{{sale.id == selectedValues}}" ng-repeat="sale in saleStatus" value="{{sale.id}}">{{sale.name}}</option>
</select>
</div>
</body>
Related
Is it possible to use nested for-loops in an ng-options expression?
The following python-style syntax does not work in AngularJS v1.5.8:
ng-options="user for group in userGroups for user in group.userNames"
angular.module('myApp', [])
.controller('LoginController', ['$scope', function ($scope) {
$scope.userGroups = [{
groupId: 1,
groupName: 'owner',
userNames: [
'John',
'Mary'
]
},
{
groupId: 2,
groupName: 'admin',
userNames: [
'Fred'
]
},
{
groupId: 3,
groupName: 'client',
userNames: [
'Company1',
'Company2',
'Company3'
]
}
];
$scope.selectedUserName = null;
$scope.$watch('selectedUserName', function(newValue, oldValue) {
console.log('selectedUserName changed from', oldValue, 'to', newValue);
});
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="LoginController">
<select
id="form-login-user"
ng-model="selectedUserName"
ng-options="user for group in userGroups for user in group.userNames"
>
<option></option>
</select>
</div>
I've tried to write a directive, which binds to my tag and when I select a item in the selector, the directive checks which item is selected and modifies the DOM in a determined way..., for example adding the content of a html into the DOM.
Unfortunatly I just cant achieve that its working. Can somebody help me please?
This is a snippet of the html view
<div class="form-group" show-errors>
<label class="control-label" for="fields[class]">Starting Class</label>
<select ng-change="change()" name="fields[class]" data-ng-model="vm.class.selectedClass" id="class" class="form-control" ascendancy required>
<option value="marauder">Marauder</option>
<option value="ranger">Ranger</option>
<option value="shadow">Shadow</option>
<option value="witch">Witch</option>
<option value="templar">Templar</option>
<option value="duelist">Duelist</option>
<option value="scion">Scion</option>
</select>
<div ng-messages="vm.form.buildForm.class.$error" role="alert">
<p class="help-block error-text" ng-message="required">Class is required.</p>
</div>
</div>
<ascend>Here comes the "......."</ascend>
This is the directive im trying to use to listen on a "select" in the selector
(function () {
'use strict';
angular
.module('builds')
.directive('ascendancy', ascendancy);
ascendancy.$inject = [/*Example: '$state', '$window' */];
function ascendancy(/*Example: $state, $window */) {
return {
restrict: 'A',
link: function postLink(scope, element, attrs) {
// Ascendancy directive logic
// ...
element.text('this is the ascendancy directive');
}
};
}
})();
The directive is freshly generated by the yo directive generator.
I would like to achieve the following behaviour:
when a item in the selector gets selected, I want to display HTML in the ascend tag. The HTML is different for each selector option.
So I managed to solve it...
build.client.controller.js
....
vm.authentication = Authentication;
vm.build = build;
vm.error = null;
vm.form = {};
vm.remove = remove;
vm.save = save;
$scope.classList = [{
'classid': 1,
'name': 'Marauder',
'ascendancies': [{
'ascendancyid': 1,
'name': 'Berserker'
}, {
'ascendancyid': 2,
'name': 'Chieftain'
}, {
'ascendancyid': 3,
'name': 'Juggernaut'
}]
}, {
'classid': 2,
'name': 'Ranger',
'ascendancies':[{
'ascendancyid': 1,
'name': 'Deadeye'
}, {
'ascendancyid': 2,
'name': 'Raider'
}, {
'ascendancyid': 3,
'name': 'Pathfinder'
}],
}, {
'classid': 3,
'name': 'Shadow',
'ascendancies':[{
'ascendancyid': 1,
'name': 'Assassin'
}, {
'ascendancyid': 2,
'name': 'Saboteur'
}, {
'ascendancyid': 3,
'name': 'Trickster'
}]
}, {
'classid': 4,
'name': 'Witch',
'ascendancies':[{
'ascendancyid': 1,
'name': 'Necromancer'
}, {
'ascendancyid': 2,
'name': 'Elementalist'
}, {
'ascendancyid': 3,
'name': 'Occultist'
}]
}, {
'classid': 5,
'name': 'Templar',
'ascendancies':[{
'ascendancyid': 1,
'name': 'Inquisitor'
}, {
'ascendancyid': 2,
'name': 'Hierophant'
}, {
'ascendancyid': 3,
'name': 'Guardian'
}]
}, {
'classid': 6,
'name': 'Duelist',
'ascendancies': [{
'ascendancyid': 1,
'name': 'Slayer'
}, {
'ascendancyid': 2,
'name': 'Gladiator'
}, {
'ascendancyid': 3,
'name': 'Champion'
}]
}, {
'classid': 7,
'name': 'Scion',
'ascendancies':[{
'ascendancyid': 1,
'name': 'Ascendant'
}]
}];
$scope.getAscendancies = function () {
if ($scope.classSelected.classid > '0')
$scope.showAscendancy = true;
}
....
form-build.client.view.html
<div class="form-group" show-errors>
<label class="control-label" ng-model="ascendancySelected" ng-show='showAscendancy'>Ascendancy</label>
<select ng-show='showAscendancy' name="ascendancy" ng-options="ascendancy.name for ascendancy in classSelected.ascendancies" ng-model="ascendancySelected" class="form-control" required></select>
<div ng-messages="vm.form.buildForm.class.$error" role="alert">
<p class="help-block error-text" ng-message="required">Ascendancy is required.</p>
</div>
</div>
I am trying to pass parameter to function changeBoard whole variable item but If i dont set value="item._id" i can't have default value. If I set i can only pass item._id.
Can someone help me how can I pass whole parametere item at the same time have default selected?
demo
https://codepen.io/Turqus/pen/LOjvLL?editors=1111
var app = angular.module('test', []);
template html
<div ng-app="test" ng-controller="select">
<select class="form-control" ng-model="selectedBoard" ng-change="changeBoard(selectedBoard)">
<option ng-repeat="item in arrayItems" value="{{item.id}}">{{item.name}}</option>
</select>
</div>
controller
var app = angular.module('test', []);
app.controller('select', $scope=>{
$scope.arrayItems = [
{'id': '133', 'name':'first', 'lists':[{'name': 1}, {'name': 2}]},
{'id': '134', 'name':'second', 'lists':[{'name': 1}, {'name': 2}]},
{'id': '135', 'name':'third', 'lists':[{'name': 1}, {'name': 2}]},
{'id': '136', 'name':'fourth', 'lists':[{'name': 1}, {'name': 2}]}
];
$scope.selectedBoard = '134';
$scope.changeBoard = (selectedBoard) => {
console.log(selectedBoard)
}
});
You can use the Javascript function .filter(). It's kind of like an SQL WHERE statement, but for Javascript arrays. It'll just filter out anything based on the function given for it.
In my example, you can remove the pass of selectedBoard to the function call in your ng-change method. Since you are already binding to the model $scope.selectedBoard.
! function() {
var app = angular.module('test', []);
var select = function($scope) {
$scope.arrayItems = [{
'id': '133',
'name': 'first',
'lists': [{
'name': 1
}, {
'name': 2
}]
},
{
'id': '134',
'name': 'second',
'lists': [{
'name': 1
}, {
'name': 2
}]
},
{
'id': '135',
'name': 'third',
'lists': [{
'name': 1
}, {
'name': 2
}]
},
{
'id': '136',
'name': 'fourth',
'lists': [{
'name': 1
}, {
'name': 2
}]
}
];
$scope.selectedBoard = '';
$scope.changeBoard = () => {
var obj = $scope.arrayItems.filter(item => item.id == $scope.selectedBoard);
// var obj = $scope.arrayItems.filter(function(item) { // Can also be written as this
// return item.id == $scope.selectedBoard;
// });
console.log(obj);
}
};
app.controller("select", ["$scope", select]);
}();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="test" ng-controller="select">
<select class="form-control" ng-model="selectedBoard" ng-change="changeBoard()">
<option ng-repeat="item in arrayItems" value="{{item.id}}">{{item.name}}</option>
</select>
</div>
I'm trying to filter results by star rating, these filters are checkboxes. I can't get this to work. I keep getting the error:
Error: input is undefined
This is my code so far:
$scope.ratings = [
{ name:'One Star', value:1, selected: true},
{ name:'Two Stars', value:2, selected: true},
{ name:'Three Stars', value:3, selected: true},
{ name:'Four Stars', value:4, selected: true},
{ name:'Five Stars', value:5, selected: true}
]
.filter('ratingsFilter', function(){
return function(vehicleResults, ratings){
console.log(ratings)
}
})
<label ng-repeat="rating in ratings">
<input name="rating" type="checkbox" value="{{rating.value}}" ng-model="rating"> star rating {{rating.value}}
</label>
When displaying the filtered results:
<div ng-repeat="vehicle in (filteredResults = (vehicleResults | filter: priceFilter | ratingsFilter:rating )) | startFrom:(currentPage - 1)*10 | limitTo:10 " class="results-container">
Can anyone give me some pointers on how to filter these results?
Thank you in advance.
I've created plunk but it's playing tricks on me so here you have codepen
http://codepen.io/maurycyg/pen/RNrxQj
JS
var app = angular.module('ratings', []);
app.controller('MainCtrl', function($scope) {
$scope.ratings = [{
name: 'One Star',
value: 1,
selected: true
}, {
name: 'Two Stars',
value: 2,
selected: true
}, {
name: 'Three Stars',
value: 3,
selected: true
}, {
name: 'Four Stars',
value: 4,
selected: true
}, {
name: 'Five Stars',
value: 5,
selected: true
}]
$scope.vehicles = [{
name: 'One',
rating: 1
}, {
name: 'Two',
rating: 2
}, {
name: 'Three',
rating: 3
}, {
name: 'Four',
rating: 4
}, {
name: 'Five',
rating: 5
}, ]
}).filter('ratingsFilter', function() {
return function(vehicles, ratings) {
filteredResults = []
angular.forEach(vehicles, function(vehicle) {
angular.forEach(ratings, function(rating) {
if (vehicle.rating === rating.value && rating.selected === true) {
filteredResults.push(vehicle)
}
})
})
return filteredResults;
}
})
I think your problem lies at the ratings repeater and not on your filter.
When you are using ng-model directive it takes care of the value binding, you cannot have both interpolated value attribute and ng-model on an input element.
I believe what you whant to achieve is best done if you remove the ng-model completely and instead use the ng-checked directive like so:
var app = angular.module('main', []);
app
.filter('ratingsFilter', function() {
return function(items, includedRatings) {
return items.filter(function (value, index, array) {
return includedRatings.indexOf(value.rating) > -1;
});
};
})
.controller('MainCtrl', function($scope) {
$scope.selectedRatings = [1, 2, 3, 4, 5];
$scope.toggleRating = function (val) {
var array = $scope.selectedRatings;
var isChecked = array.indexOf(val);
if (isChecked > -1) {
for (var i = array.length; i--;) {
if (array[i] === val) {
array.splice(i, 1);
}
}
}
else {
array.push(val);
}
};
$scope.ratings = [
{ name:'One Star', value:1, selected: true},
{ name:'Two Stars', value:2, selected: true},
{ name:'Three Stars', value:3, selected: true},
{ name:'Four Stars', value:4, selected: true},
{ name:'Five Stars', value:5, selected: true}
];
$scope.priceFilter = {};
$scope.vehicleResults = [
{ name:'Porche', rating: 3, price:80000},
{ name:'Ferrari', rating: 1, price:150000},
{ name:'Volvo', rating: 2, price:54000},
{ name:'Batmobile', rating: 5, price:10},
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="main" ng-controller="MainCtrl">
<label ng-repeat="rating in ratings">
<input name="rating" type="checkbox"
value="{{rating.value}}"
ng-click="$parent.toggleRating(rating.value)"
ng-checked="$parent.selectedRatings.indexOf(rating.value) > -1" />
star rating {{rating.value}}
</label>
<br />
<label>
Price:
<input ng-model="priceFilter['price']" />
</label>
<label>
selected Rating:
{{ selectedRatings }}
</label>
<ul >
<li ng-repeat="vehicle in vehicleResults | filter : priceFilter | ratingsFilter: selectedRatings">
{{vehicle.name}} - {{vehicle.price | currency}} ({{vehicle.rating}} stars)
</li>
</ul>
</div>
I am using forEach to loop through two arrays (cake and frosting). An alert confirms the expected results.
How can the results be added to the 3rd array? (cakeOptions)
This fiddle shows the work so far:
http://jsfiddle.net/_StephenC/ov5syuwb/20/
Thanks
function CakeController($scope) {
$scope.cakes = [{
name: 'chocolate',
'price': 6
}, {
name: 'yellow',
'price': 5
}, {
name: 'coconut',
'price': 7
}
];
$scope.frostings = [{
'name': 'chocolate',
'price': 5
},
{
'name': 'vanilla',
'price': 5
}, {
'name': 'coconut',
'price': 8
}];
$scope.cakeOptions = [];
angular.forEach($scope.cakes, function (value, key) {
var thisCake = JSON.stringify(value.name);
angular.forEach($scope.frostings, function (value) {
var thisFrosting = JSON.stringify(value.name, value.value);
alert(thisCake + ' cake with ' + thisFrosting + ' frosting');
I have created a new fiddle that actually works and with the added example of populating a third box from an array of the combinations:
JSFiddle
HTML
<div ng-app="cakeApp">
<div ng-controller="cakeCtrl">
<div id="one"><strong>Cakes</strong><br>
<div class="order" ng-repeat="cake in cakes">
{{cake.name}}
</div>
</div>
<div id="two"><strong>Frostings</strong><br>
<div class="order" ng-repeat="frosting in frostings">
{{frosting.name}}
</div>
</div>
<div id="three"><strong>Combinations</strong><br>
<div class="order" ng-repeat="cakeOption in cakeOptions">
{{cakeOption}}
</div>
</div>
</div>
</div>
JAVASCRIPT:
var app = angular.module('cakeApp', []);
app.controller('cakeCtrl', ['$scope', function($scope) {
$scope.cakes = [{
name: 'chocolate',
price: 6
}, {
name: 'yellow',
price: 5
}, {
name: 'coconut',
price: 7
}];
$scope.frostings = [{
'name': 'chocolate',
'price': 5
},
{
'name': 'vanilla',
'price': 5
}, {
'name': 'coconut',
'price': 8
}];
$scope.cakeOptions = [];
angular.forEach($scope.cakes, function (value, key) {
var thisCake = JSON.stringify(value.name);
angular.forEach($scope.frostings, function (value) {
var thisFrosting = JSON.stringify(value.name, value.value);
$scope.cakeOptions.push(thisCake + ' cake with ' + thisFrosting + ' frosting');
});
});
}]);