I want to build select list (select2) options when user clicks on html button.
My HTML:
<select id="mySel2" class="form-control" multiple="multiple">
<option ng-repeat="item in items" ng-selected="item.selected"
ng-model="item.tag">
{{item.tag}}
</option>
</select>
Angular js function code on button click:
var fruits=angular.module("myApp",[]);
fruits.controller('ctrlTags', function($scope){
/* I HAVE SET DEFAULT VALUE TO SELECT LIST*/
/* IT WORKING PERFECT WITH SHOWING SELECTED VALUES*/
var tagsData = [
{id:1,tag:'Apple'},
{id:2,tag:'Banana'},
{id:3,tag:'Cherry'},
{id:4,tag:'Cantelope'},
{id:5,tag:'Grapefruit'},
{id:6,tag:'Grapes',selected:true},
{id:7,tag:'Lemon'},
{id:8,tag:'Lime'},
{id:9,tag:'Melon',selected:true},
{id:10,tag:'Orange'},
{id:11,tag:'Strawberry'},
{id:11,tag:'Watermelon'}
];
$scope.items = tagsData;
/*NOW ON BUTTON CLICK GETKEY() FUNCTION WILL BE CALLED*/
/* AND I WANT TO RENDER/REFRESH SELECT LIST WITH NEW DATA */
$scope.getKey=function(data){
var newData = [
{id:4,tag:'car'},
{id:5,tag:'bat',selected:true},
{id:6,tag:'cat',selected:true},
{id:7,tag:'Lemon'},
{id:8,tag:'Lime'},
];
$scope.items=newData;
};
});
ISSUE:ON BUTTON CLICK IT IS UPDATING SELECT LIST VALUES BUT NOT SHOWING DEFAULT SELECTED VALUES
PLEASE TELL ME HOW TO REFRESH SELECTED VALUE AS WELL.
Use select2 (form-widgets.js)
$('[name="NAME"]').select2({placeholder: ''}).val(VAL).change();
You need to add model into select section ng-model="selected".
You can add for example first index
in controller $scope.selected = tagsData[0]
Related
I have a dropdownlist -
<select ng-model="contact.type" id="select_{{$index}}" ng-change="changedValue()" class="searchCriteria">
<option>Policy Number</option>
<option>Insured Name</option>
</select>
I want to get the selected item using angularjs. So far I have tried
$scope.changedValue = function () {
alert($(".searchCriteria option:selected").html());
}
among other things. But each time the alert shows "undefined". How do I get the selected option text?
You can just use the $scope variable,
$scope.changedValue = function () {
alert($scope.contact.type);
}
This is my select tag
<select id="selectPrimaryObject" class="form-control" ng-change="getPrimaryRelations()" ng-model="relation.from">
<option id="md-option" ng-repeat="item in primaryObjectsList" value="{{item.id}}">{{item.name}}</option>
</select>
And my protractor code is
element.all(by.id('selectPrimaryObject')).each(function (values, index) {
values.click(); // select the <select>
browser.driver.sleep(5000); // wait for the renderings to take effect
element.all(by.id('md-option')).click(); // select the first md-option
browser.driver.sleep(5000); // wait for the renderings to take effect
});
It is selecting last item from dropdown, but I want each item to be selected one by one.
Find the options by repeater, click every option with the help of each():
var selectElement = element(by.id('selectPrimaryObject'));
selectElement.click();
var options = selectElement.all(by.repeater('item in primaryObjectsList'));
options.each(function (option) {
option.click();
});
here fiddle:http://jsfiddle.net/TU6tp/47/
Here i am getting if i select any option in dropdown i will get same in in selectbox text but i need "Change portfolio" There should be select anyor change Portfolio.
If u see fiddle u will understand easily what i am trying to say
CODE
<select
ng-model="selectedItem"
ng-options="o.label for o in selectables">
</select>
<p>Portfolio manager: {{selectedItem.value}}</p>
<p>Group: {{selectedItem.manager}}</p>
<p>Group name: {{selectedItem.groupname}}</p>
you can use ng-change with two scope variables selectedItemx and selectedItem
Fiddle
<select
ng-model="selectedItemx"
ng-options="o.label for o in selectables" ng-change="changeLable()">
</select>
$scope.changeLable = function() {
$scope.selectedItem = $scope.selectedItemx;
$scope.selectables[0]['label'] = "CHANGE PORTFOLIO";
$scope.selectedItemx = $scope.selectables[0];
}
// this is the model that's used for the data binding in the select directive
// the default selected item
$scope.selectedItemx = $scope.selectables[0];
I have two drop downs. Initially both has values like "First","Second","Third",...
When 1st dropdown has value "First" the second should not offer a value "First" that is second should have other than what is selected from 1st one. I want to do this using angularjs. Values in 2nd dropdown should be changed dynamically.
<select class="form-control" ng-model="Data.firstType">
<option>First</option>
<option>Second</option>
<option>Third</option>
</select>
<select class="form-control" ng-model="Data.SecondType">
<option>First</option>
<option>Second</option>
<option>Third</option>
</select>
Can anyone help on this?
Thanks in advance.
If you're items in the drop downs are static you can do this fiddle
ng-if="Data.FirstType !== First"
If they are dynamic then you can filter the items in the second list based upon the item selected in the first drop down
Here is a fiddle to dynamically filter the second list if the lists are being populated dynamically.
function MyCtrl($scope){
$scope.Data = {};
$scope.items = [{id:1, name:'First'}, {id:2, name:'Second'}, {id:3, name:'Third'}];
$scope.exclude = function(x){
return x !== $scope.Data.firstType;
}
}
Just use a $watch:
$scope.$watch('Data.firstType', function(val) {
//Get index of type in Data.yourArrayData
var idx = $scope.Data.yourArrayData.indexOf(val);
$scope.Data.yourArrayData.splice(idx, 1);
});
This assumes you are binding your second select to yourArrayData using an ng-repeat. I haven't tested this code, but it should be what you need.
I have a listener set up in Angular to trigger an event when a select box's option changes.
I also have a button, which I want to "reset" the selection box to blank (NOT option 1).
Here's some code:
HTML:
<select id="dropdown" ng-model="orderProp" >
<option ng-repeat="cats in categories" value="{{cats}}">{{cats}}</option>
</select>
<button id="showHide" ng-click="showAll($event)" >Show all results</button>
Javascript:
$scope.showAll = function($event){
$scope.orderProp ="0";
}
Listener function on the select box:
$scope.$watch( 'orderProp', function ( val ) {
$scope.filteredMarkersProperty = $filter('filter')($scope.markersProperty, val);
$scope.zoomProperty = 11;
calcFocus();
});
This KINDA works, although only sometimes, and I have no idea why it works (or doesn't) as I think it's the wrong way of going about it. I tried resetting it with jQuery .prop('selectedIndex',0);, but while this resets the index it doesn't trigger the listening function at all so this won't work.
Any ideas?
First - take a look at ngOptions in the select directive: http://docs.angularjs.org/api/ng.directive:select
<select ng-options="cats for cats in categories" ng-model="orderProps"></select>
<button ng-click="orderProps='0'">Show all results</button>
This will work as long as '0' is not one of the categories. The select-box will show a blank when the value of orderProps does not match any of the values in categories.
Your $watch function is not a listener on the select box, it watches orderProps and orderProps can get changed outside the select box. If you want a listener on the select box you could add a ng-change="myOnChangeFn()".
Added a working plunkr: http://plnkr.co/edit/fqWkJBYOXGaYsK9Fnedc?p=preview