Here is my html part
<select style="width:250px; height:50px">
<option ng-model="sellerDetails" ng-click="sellerValue(sellerDetails)" >seller 1</option>
<option >seller 2</option>
<option >seller 3</option>
</select>
here is my controller part
$scope.sellerValue= function(sellerDetails){
console.log("invoking sellerValue");
console.log(sellerDetails);
}
what is wrong i am doing here
i am not even invoking the controller part of my sellervalue funtion
There are some points:
Point 1: You've placed the ngModel in <option>, while it should be in <select> tag.
Point 2: ngClick is used to trigger, obviously click, it isn't the correct directive that you should use in this case, because a click doesn't mean that you changed the value of that field. The correct one is ngChange that detects real changes.
Point 3: Since you already have the value of selected item stored in $scope.sellerDetails you don't need to pass it as parameter to your function.
Point 4: I recommend you to use ngOptions instead of doing it statically.
See it working:
(function() {
angular
.module('app', [])
.controller('mainCtrl', mainCtrl);
function mainCtrl($scope) {
$scope.sellers = [];
function loadSellers(max) {
for (var i = 1; i <= max; i++) {
$scope.sellers.push("Seller " + i);
}
}
loadSellers(3);
$scope.sellerValue = function() {
console.log("sellerValue: ", $scope.sellerDetails);
}
}
})();
.select-field {
width: 250px;
height: 50px
}
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
</head>
<body ng-controller="mainCtrl">
Statically:
<select class="select-field" ng-model="sellerDetails" ng-change="sellerValue()">
<option>seller 1</option>
<option>seller 2</option>
<option>seller 3</option>
</select>
<hr>
With ng-options:
<select class="select-field" ng-options="seller for seller in sellers" ng-model="sellerDetails" ng-change="sellerValue()">
<option value="" disabled hidden>Select a seller</option>
</select>
</body>
</html>
I hope it helps!!
Try this ,
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.sellerDetails = 'seller 1';
$scope.sellerValue= function(sellerDetails){
console.log("invoking sellerValue");
console.log(sellerDetails);
}
});
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link href="style.css" rel="stylesheet" />
<script data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js" data-require="angular.js#1.4.x"></script>
<script src="app.js"></script>
</head>
<body ng-app="plunker" ng-controller="MainCtrl">
<select style="width:250px; height:50px" ng-model="sellerDetails" ng-click="sellerValue(sellerDetails)">
<option >seller 1</option>
<option >seller 2</option>
<option >seller 3</option>
</select>
</body>
Related
How do I dynamically make options selected using ng-repeat in a select element?
Here is an example of what I am trying to achieve and the results I've gotten with my approach.
https://plnkr.co/edit/xOkNzalcw1DlJ7PU?open=lib%2Fscript.js&deferRun=1&preview
HTML
var app = angular.module('plunker', []);
app.controller('MainCtrl', function ($scope) {
$scope.name = 'World';
$scope.options = [
{
value: 'red',
selected: false,
},
{
value: 'blue',
selected: true,
},
];
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script
data-require="angular.js#1.0.x"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"
></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<h3>Via ng-repeat</h3>
<select multiple="yes">
<option ng-repeat="option in options" value="{{option.value}}" selected="{{option.selected}}">
{{option.value}} - option.selected = {{option.selected}}
</option>
</select>
<br />
<br />
<br />
<h3>Manual</h3>
<select multiple="yes">
<option value="red">red</option>
<option value="blue" selected>blue</option>
</select>
</body>
</html>
I was following the Bootstrap Multiselect documentation to implement bootstrap multiselect. However I want to get both the effects of optionClass and includeSelectAllOption so that I get select all and alternate coloring. Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Include the plugin's CSS and JS: -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" type="text/css"/>
<script type="text/javascript">
$(document).ready(function() {
$('#example-optionClass').multiselect({
optionClass: function(element) {
var value = $(element).val();
if (value%2 == 0) {
return 'even';
}
else {
return 'odd';
}
}
});
});
</script>
<style type="text/css">
#example-optionClass-container .multiselect-container li.odd {
background: #eeeeee;
}
</style>
</head>
<body>
<div class="container">
<h2>Bootstrap Multiselect Test</h2>
<p>I want to use both <b>optionClass</b> and <b>includeSelectAllOption</b> togather:</p>
<div id="example-optionClass-container">
<select id="example-optionClass" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
</div>
</body>
</html>
Please Help me to get both of their effects.
You can simply add the includeSelectAllOption, this looks as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Include the plugin's CSS and JS: -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" type="text/css"/>
<script type="text/javascript">
$(document).ready(function() {
$('#example-optionClass').multiselect({
includeSelectAllOption: true, // add select all option as usual
optionClass: function(element) {
var value = $(element).val();
if (value%2 == 0) {
return 'even';
}
else {
return 'odd';
}
}
});
});
</script>
<style type="text/css">
#example-optionClass-container .multiselect-container li.odd {
background: #eeeeee;
}
</style>
</head>
<body>
<div class="container">
<h2>Bootstrap Multiselect Test</h2>
<p>I want to use both <b>optionClass</b> and <b>includeSelectAllOption</b> togather:</p>
<div id="example-optionClass-container">
<select id="example-optionClass" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
</div>
</body>
</html>
If you want to take into account the select all option in your coloring, i.e. treat the select all option as odd (as the first option), you can reverse the coloring and manipulate the multiselect-all class:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- Include the plugin's CSS and JS: -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" type="text/css"/>
<script type="text/javascript">
$(document).ready(function() {
$('#example-optionClass').multiselect({
includeSelectAllOption: true, // add select all option as usual
optionClass: function(element) {
var value = $(element).val();
if (value%2 == 0) {
return 'odd'; // reversed
}
else {
return 'even'; // reversed
}
}
});
});
</script>
<style type="text/css">
#example-optionClass-container .multiselect-container li.odd {
background: #eeeeee;
}
#example-optionClass-container .multiselect-all {
background: #eeeeee;
}
</style>
</head>
<body>
<div class="container">
<h2>Bootstrap Multiselect Test</h2>
<p>I want to use both <b>optionClass</b> and <b>includeSelectAllOption</b> togather:</p>
<div id="example-optionClass-container">
<select id="example-optionClass" multiple="multiple">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
</div>
</div>
</body>
</html>
http://plnkr.co/edit/knmWulxhKdeQoMVm7u4k?p=preview
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-static-select-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="staticSelect">
<select name="quarter" ng-model="Quarter">
<option ng-repeat="v in [1,2,3,4]" ng-selected="v==4">Q{{v}}</option>
</select>
<select name="quarter" ng-model="Quarter">
<option ng-repeat="v in [1,2,3,4]" value="{{v}}" ng-selected="v==3">Q{{v}}</option>
</select>
</body>
</html>
ng-selected seems to be only selecting the last element. Why is this?
I have inspected the element and the ng-selected tag is true. However, if it is not the last element then it won't be selected initially.
you can try this code,
<select name="quarter" ng-model="Quarter" ng-options="item as 'Q'+item for item in [1,2,4,3]">
in your controller you have to specify "Quarter", like :
$scope.Quarter = 3
Here is a full example:
(function(angular) {
'use strict';
angular.module('staticSelect', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.data = {
singleSelect: null,
multipleSelect: [],
option1: 'option-1',
};
$scope.Quarter = 3;
$scope.forceUnknownOption = function() {
$scope.data.singleSelect = 'nonsense';
};
}]);
})(window.angular);
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example - example-static-select-production</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
</head>
<body ng-app="staticSelect" ng-controller="ExampleController">
<select name="quarter" ng-model="Quarter" ng-options="item as 'Q'+item for item in [1,2,3,4]">
</body>
</html>
I'm trying to repeat a piece of html based on value of my model. If a user select "3" at the dropdown, it will display "1,2,3" each one on it's own div. After that, if user changes the dropdown to 2, then it should render only "1,2".
Here's what I'm trying:
<html ng-app="app">
<head>
<title>teste</title>
</head>
<body ng-controller='testController'>
<select ng-model="quantity">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div ng-repeat="i in getNumber(quantity) track by $index">{{$index + 1}}</div>
Value on Model:{{quantity}}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var app = angular.module("app",[]);
app.controller('testController',['$scope', function($scope){
$scope.quantity = 1;
$scope.getNumber = function (num) {
return new Array(num);
};
}]);
</script>
</body>
</html>
Until now, it's not working the render part based on model value. What am I misising?
Using the limitTo filter is the most idiomatic way to do this
angular.module('app',[])
.controller('testController', function($scope) {
$scope.values=[1,2,3,4,5,6];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app" ng-controller='testController'>
<select ng-model="quantity">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div ng-repeat="i in values | limitTo:quantity">{{i}}</div>
</body>
$scope.getNumber = function (num) {
return new Array(parseInt(num));
};
also works from your code
<html ng-app="app">
<head>
<title>teste</title>
</head>
<body ng-controller='testController'>
<select ng-model="quantity" ng-change="changed()">
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<div ng-repeat="i in values track by $index">{{$index + 1}}</div>
Value on Model:{{quantity}}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
var app = angular.module("app",[]);
app.controller('testController',['$scope', function($scope){
$scope.quantity = 1;
$scope.values = [1]
$scope.getNumber = function (num) {
return new Array(num);
};
$scope.changed = function() {
$scope.values = new Array(parseInt($scope.quantity));
}
}]);
</script>
</body>
</html>
I'm struggling to understand how ng-options works with a data source. I've read the docs and I feel like I'm doing exactly what is required, but I still get problems when attempting.
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"> </script>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript">
angular.module('app', [])
.controller('IndexCtrl', ['$scope', function($scope) {
$scope.types = {
1: "value1",
2: "value2",
5: "value3"
};
}]);
</script>
</head>
<body ng-controller="IndexCtrl">
<select ng-model="type" ng-options="k as v for(k, v) in types">
<option value="">Select Type</option>
</select>
</body>
</html>
I always get this error in the console:
Error:
Expected ngOptions in form of 'select (as label)? for (key,)?value in collection (track by expr)?' but got 'k as v for(k, v) in types'.
What am I doing incorrectly?
See plunkr here:
http://plnkr.co/edit/Bl6u4151KyDkxhYrsdCm?p=preview
This is kind of strange, but it seems like you need to put a space after for. This works:
<select ng-model="type" ng-options="k as v for (k, v) in types">
<option value="">Select Type</option>
</select>