using angular-ui with select2 as follows:
<select ui-select2 ng-model="search.categories" multiple style="width:300px" data-placeholder="select category">
<option value="open" >open</option>
<option value="close" >close</option>
</select>
Where and how should I preselect options? By default selected option is only first.Somehow in controller?
For a simple <select> list it's easy:
MyController function($scope) {
$scope.search = {
categories: 'close'
};
}
For <input> it gets trickier because you may need to add a initSelection option
Related
I want to call specific methods based on which option was clicked, like this:
<select>
<option value="0" ng-click="callMethodOne()">1</option>
<option value="1" ng-click="callMethodTwo()">2</option>
</select>
But it doesn't work, I can't call ng-click inside the option tag.
I also can't use it inside the select tag because I won't be able to call the function by its name.
How could I solve this?
You need to add ng-change config along with ng-model on <select> tag.
<select ng-model="selectedOption" ng-change="onChange">
<option value="0">1</option>
<option value="1">2</option>
</select>
Now, In your controller, define onChange function as
$scope.onChange = function(){
// The option selected is stored in $scope.selectedOption
// perform the business logic using $scope.selectedOption
}
Please see this relevant jsFiddle
Within the code I am trying to fire a method when a different option is selected to alert the user. However no event is being trigged
HTML:
<div ng-controller = "MyCtrl">
<p>Term</p>
<select id = "term" ng-change="test()">
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
</select>
</div>
JS:
var app = angular.module('HelloApp', []);
app.controller('MyCtrl',['$scope','$element', function($scope, $element) {
$scope.test = function () {
alert ("changed!");
}
}]);
You have some issues.
Firstly: <div ng-controller = "MyCtrl"> - you have spaces in between.
Secondly, you're not declaring your app with ng-app. This is because you set your fiddle as jquery, and not Angular. If you had set it as angular you wouldn't need this in the fiddle
This is your fiddle setup
This is an Angular fiddle setup
Thirdly, to use select with AngularJS, you need to have an ng-model on the select tag. In this case i just used bob
<div ng-app="HelloApp"> <!-- declare your angular app. typically would go on body or html -->
<div ng-controller="MyCtrl">
<p>Term</p>
<select ng-model="bob" ng-change="test()">
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
</select>
</div>
</div>
var app = angular.module('HelloApp', []);
app.controller('MyCtrl',['$scope','$element', function($scope, $element) {
console.log('ctrl working');
$scope.test = function () {
alert ("changed!");
}
}]);
Here is a working fiddle
http://jsfiddle.net/ctbLparv/
Also, if your intention is to just set a property based on the selection, you don't need to use ng-change. You can rely on the two-way binding.
So for example, this fiddle: http://jsfiddle.net/ps8jnyL8/
No select is being called. We also default the selected term to 10 when it first loads.
<div ng-app="HelloApp">
<div ng-controller="MyCtrl">
<p>Term</p>
<select ng-init="selectedTerm = '10'" ng-model="selectedTerm">
<option value="5">5</option>
<option value="10">10</option>
<option value="15">15</option>
</select>
<p>Selected Term: {{selectedTerm}}</p>
</div>
</div>
Here is the working JSFiddle:
https://jsfiddle.net/G8S32/1162/
The main change was adding this line:
ng-model="items"
which doesn't do anything except update the model and cause the event to fire.
Check out the documentation for ng-change:
https://docs.angularjs.org/api/ng/directive/ngChange
Particularly this line:
The ngChange expression is only evaluated when a change in the input
value causes a new value to be committed to the model.
How do i render the values inside dropdown(selectbox options).
I need to show 'header' and 'footer' names inside selectbox.
$scope.sections = [
{
"header":{
"background-color":"#fff",
"color":"#fff"
},
"footer":{
"background-color":"#fff",
"color":"#fff"
}
}
];
I tried in the following way but not working,
<select name="section" class="form-control" ng-model ="section">
<option ng:repeat="options[0] in sections">
{{options[0]}}
</option>
</select>
You need to iterate over keys instead of values.
<option ng-repeat="(option, val) in sections[0]">
{{option}}
</option>
Or with ng-options
ng-options="option for (option, val) in sections[0]"
see the plunker
http://plnkr.co/edit/FQEooL5wNh8Xl8GprT99?p=preview
Is there any way to filter a select-box without using ng-repeat or ngOptions in AngularJS via angular filters($filter).
I have a select-option code written like this:
<select>
<option value="one">one</option>
<option value="two">two</option>
<option value="three">three</option>
</select>
and an input box which will be used to filter the content in the options:
<input ng-model="myFilter">
you can use ng-if with a function.
<option ng-if="checkFilter('group1')" value="one">
and then in your controller
function checkFilter(value) {
return myFilter.filter(function (element) { return element == value });
}
Plunkr: http://plnkr.co/edit/pJRzKn2v1s865w5WZBkR?p=preview
I have 2 forms, a simple and advanced form.
Both have the same options (a lot of options)
Only a couple of differences in the opening select tag which contains
<select ng-show="showSimpleSelect"
ng-model="selected_tag"
ng-change="changeFormTag(formData)"
class="form-control manage-source-input-tag">
<!-- if advanced then -->
<select ng-show="showAdvanceSelect"
ng-model="formData.tag"
ng-change="changeTag(formData.tag)"
class="form-control manage-source-input-tag">
<option value="brand">Brand</option>
<option value="client">Client</option>
<option value="companies">Companies</option>
...
</select ng-show="showSimpleSelect">
</select ng-show="showAdvanceSelect">
In my Directives Controller, I'm using vars like this to show and hide the opening select tags:
vs.showSimpleForm = function() {
vs.showSimpleSelect = true,
vs.showAdvanceSelect = false,
However the HTML ends up looking like this, which breaks the design:
How would you go about refactoring this?
Angular overrides the select tag as a custom directive that expects an ng-options attribute instead of option tags. You can just hard-code your options into an array and put that as the ng-option
//controller
$scope.options = ["brand", "client", "companies"];
//html
<select ng-show="showAdvanceSelect"
ng-model="formData.tag"
ng-change="changeTag(formData.tag)"
ng-options="option for option in options"
class="form-control manage-source-input-tag">