I need to bind an event in my controller to be called when there is a change in value of a dropdown. This dropdown is a multi-select dropdown -which is in a directive.
I have been able to customize the dropdown using the settings available - however, unable to bind the event.
Here is the code
HTML:
<html>
<head>
<meta charset="utf-8">
<title>AngularJS Dropdown Multiselect</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<script src="./angular.min.js"></script>
<!--<script src="./ui-bootstrap-tpls.js"></script>-->
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.7.0/lodash.min.js"></script>
<script src="./app.js"></script>
<style>
.noscroll {
overflow: hidden;
}
</style>
</head>
<body>
<div ng-app="myApp" ng-controller="AppCtrl">
<div ng-dropdown-multiselect="" options="fruitdata"
selected-model="fruitmodel" checkboxes="true"
extra-settings="fruitsettings" events="extraEvents">
</div>
Selected Model: {{fruitmodel}} | json
</div>
</body>
</html>
JS:
'use strict';
var app = angular.module('myApp', ['angularjs-dropdown-multiselect']);
app.controller('AppCtrl', function ($scope) {
$scope.fruitmodel = [];
$scope.fruitsettings = {
enableSearch: false
};
$scope.fruitdata = [{
"label": "Apple",
"id": 1
}, {
"label": "Banana",
"id": 2
}, {
"label": "Orange",
"id": 3
}, {
"label": "Pineapple",
"id": 4
}, {
"label": "Strawberry",
"id": 5
}];
$scope.example2settings = {
displayProp: 'id'
};
$scope.extraEvents = {
onItemDeselect: '$scope.onChange'
};
$scope.onChange = function() {
console.log($scope.fruitdata);
};
});
I need to detect the change to the model and take action based on this. I tried two approaches - adding ng-change to the dropdown as below - however, this does not work.
<div ng-dropdown-multiselect="" options="fruitdata"
selected-model="fruitmodel" checkboxes="true"
extra-settings="fruitsettings" ng-change="onChange()">
</div>
The directive does seem to allow extending the event handling - however, I guess I am not getting it right.
Snapshot from AngularJS Dropdown Multiselect
Seems like you have to use:
<div ng-dropdown-multiselect="" ... events="eventsCallback"></div>
and into your controller:
$scope.eventsCallback = {
onItemSelect: function () { ... },
onSelectionChanged: function () { ... }
}
Is $scope.fruitmodel where you are storing the selected items? You can use $scope.$watchCollection to act on changes.
$scope.$watchCollection('fruitmodel', function(newValue, oldValue) {
console.log(newValue, oldValue);
});
Related
I have the following code:
index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body ng-app="myModule">
<div ng-controller="myController">
<div some-message></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
<script src="script.js"></script>
</body>
</html>
script.js file
var app = angular.module('myModule', []);
var myController = function($scope) {
$scope.message = 'sdsd';
var technologies = [
{ name: "C#", likes: 0, dislikes: 0 },
{ name: "ASP.NET", likes: 0, dislikes: 0 },
{ name: "SQL", likes: 0, dislikes: 0 },
{ name: "AngularJS", likes: 0, dislikes: 0 }
];
$scope.technologies = technologies;
$scope.updateLikes = function(tech) {
tech.likes++;
}
}
app.controller('myController', myController)
app.directive('someMessage', function() {
return {
templateUrl: 'some-message.html',
controller: function($scope) {
$scope.testName = "Andrej";
console.log('tech', $scope.technologies)
// $scope.updateLikes = function(tech) {
// tech.likes++;
// }
}
}
})
and
some.message.html
<ul>
<li ng-repeat="tech in technologies">
{{ tech.name }} -- {{ tech.likes }} <button ng-click="updateLikes(tech)">Set like</button>
</li>
</ul>
so as you can see inside my module i have one controller and directive.
I have function where on button click i am increasing the likes for every technology.
Because i am new to angular.js i don't know.
Is there downsite if my updateLikes function is in the controller , instead of directive ?
Note i have the same function in the directive and it works same.
And why the function
updateLikes can be executed in the controller ?
As i understood when we have nested scopes the child scope can access the scope in the parent but not in the opposite case
As shown below, in the controller.js, I have tried to use the { name: 'item' } style and it worked in the viewer.
However, I would like to pull the data from the SQL Database.
I tried using {{member.member_name}} but it didn't work.
$http.get('../crud/members_select.php').then(function(response){
$scope.members = response.data;
});
this.items = [
{ member_name: 'Tim' },
{ member_name: 'Dave' },
{ member_name: 'Jenny' }
];
Thus, my question is "How can I do the {{member_name}} thing in order to repeat the data in a single code from SQL Database?"
Below is the HTML CODE.
<div class="ibox-content">
<select ng-options="name as member.member_name for n in members"
multiple
ng-model="selections"
bs-duallistbox></select>
</div>
Thank you in advance!!
You need to do it this way
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
<script src="https://code.angularjs.org/snapshot/angular.min.js"></script>
</head>
<body ng-app="selectExample">
<script>
angular.module('selectExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.items = [
{ member_name: 'Tim' },
{ member_name: 'Dave' },
{ member_name: 'Jenny' }
];
$scope.selections = [];
}]);
</script>
<div ng-controller="ExampleController">
<label>Color (null not allowed):
<select ng-model="selections" ng-options="item.member_name for item in items" multiple></select>
</label>
<hr/>
Currently selected: {{ selections }}
</div>
</body>
</html>
Im new to ui-bootstrap. actually im trying to use some components as tabs to make a menu for my app. My solution is unfortunately not working. Who can please help.
Here is my code.
angular.module('scolarite', ['ui.bootstrap', 'ui.bootstrap.demo', 'ngAnimate', 'ngTouch']);
angular.module('ui.bootstrap.demo', ['ui.bootstrap', 'ui.bootstrap.demo', 'ngAnimate', 'ngTouch']).controller('TabsDemoCtrl', function ($scope, $window) {
$scope.tabs = [
{title: 'Dynamic Title 1', content: 'Dynamic content 1'},
{title: 'Dynamic Title 2', content: 'Dynamic content 2', disabled: true}
];
$scope.alertMe = function () {
setTimeout(function () {
$window.alert('You\'ve selected the alert tab!');
});
};
$scope.model = {
name: 'Tabs'
};
});
<html ng-app="scolarite">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Accueil</title>
<link href="${pageContext.request.contextPath}/css/bootstrap.css" rel="stylesheet" type="text/css"/>
<link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="${pageContext.request.contextPath}/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css"/>
<script src="${pageContext.request.contextPath}/js/angular-1.6.1.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/angular-animate.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/angular-animate.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/angular-touch.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/angular-touch.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/acc.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/ui-bootstrap-2.5.0.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/ui-bootstrap-2.5.0.tpls.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/ui-bootstrap-tpls-2.5.0.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/ui-bootstrap-2.5.0.min.js" type="text/javascript"></script>
</head>
<body ng-controller="TabsDemoCtrl">
<style type="text/css">
form.tab-form-demo .tab-pane {
margin: 20px 20px;
}
</style>
<uib-tabset type="pills">
<uib-tab heading="Inscription">Tab 1 content</uib-tab>
<uib-tab heading="Liste Etudiants" classes="btn-sm">Tab 2 content</uib-tab>
</uib-tabset>
</body>
</html>
Thanks in Advance
You can do this simply
$scope.groups = [
{
"Name" : "Alfreds Futterkiste",
"Country" : "Germany",
"open" : true
},
{
"Name" : "Berglunds snabbköp",
"Country" : "Sweden",
"open": false
},
{
"Name" : "Centro comercial Moctezuma",
"Country" : "Mexico",
"open" : false
},
{
"Name" : "Ernst Handel",
"Country" : "Austria",
"open" : false
}
]
in HTML
<uib-accordion close-others="true">
<div uib-accordion-group class="panel-default" heading="{{group.Name}}" ng-repeat="group in groups" is-open="group.open">
{{group.Country}}
</div>
</uib-accordion>
Have a look at this plunker
It looks as though you are getting your modules mixed up. You have set up two modules scolarite and ui.bootstrap.demo and then you have attached the TabsDemoCtrl controller to one of them - the ui.bootstrap.demo module, yet you are using the scolarite module in the app's ng-app directive.
To fix, you can change your ng-app directive so that your app uses your ui.bootstrap.demo module (the one with the controller), like this:
<html ng-app="ui.bootstrap.demo">`
Then you can remove the declaration of the scolarite module by removing this line:
angular.module('scolarite', ['ui.bootstrap', 'ui.bootstrap.demo', 'ngAnimate', 'ngTouch']);
Side note: You can do this the other way around, the key is to attach the controller to the module that you specify in your ng-app directive.
Try this solution its working fine
// Code goes here
angular.module('scolarite', ['ui.bootstrap.demo']);
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']).controller('TabsDemoCtrl', function ($scope, $window) {
$scope.tabs = [
{title: 'Dynamic Title 1', content: 'Dynamic content 1'},
{title: 'Dynamic Title 2', content: 'Dynamic content 2', disabled: true}
];
$scope.alertMe = function () {
setTimeout(function () {
$window.alert('You\'ve selected the alert tab!');
});
};
$scope.model = {
name: 'Tabs'
};
});
I am trying to build the select item component using angular js. But it is not selecting the correct default selected value.
I am initializing the select item value as {"brandSetCode":1,"bannerColor":null,"fontColor":null};
But it always selects the last element. How to solve this issue?
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-sanitize.js"></script>
</head>
<body ng-app="sanitizeExample">
<script>
angular.module('sanitizeExample', ['ngSanitize'])
.controller('ExampleController', ['$scope', function($scope, $sce) {
$scope.initSelectItem ={"brandSetCode":null,"bannerColor":null,"fontColor":null};
$scope.mySelectableItems =[{
"label": "All",
"value": {
"brandSetCode": null,
"bannerColor": null,
"fontColor": null
}
}, {
"label": "SPIRITS",
"value": {
"brandSetCode": 1,
"bannerColor": null,
"fontColor": null
}
},
{
"label": "WINES",
"value": {
"brandSetCode": 3,
"bannerColor": null,
"fontColor": null
}
}
];
}]);
</script>
<div ng-controller="ExampleController">
<select name="brand"
data-ng-model="initSelectItem"
data-ng-options="brand.value as brand.label for brand in mySelectableItems track by $index">
</select>
</div>
</body>
</html>
Use ng-init() and initialize the default option.
<select ng-init="initSelectItemDefault()" ng-model="initSelectItem" ng-options="brand.label for brand in mySelectableItems">
</select>
And in controller
$scope.initSelectItemDefault = function(){
$scope.initSelectItem = $scope.mySelectableItems.filter(e => e.label == "All")[0];
}
DEMO
You need to remove the track by or manually compare them because track by adds a field named $$hash in the model.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular-sanitize.js"></script>
</head>
<body ng-app="sanitizeExample">
<script>
angular.module('sanitizeExample', ['ngSanitize'])
.controller('ExampleController', ['$scope', function($scope, $sce) {
$scope.initSelectItem = {};
$scope.mySelectableItems =[{
"label": "All",
"value": {
"brandSetCode": -1,
"bannerColor": -1,
"fontColor": -1
}
}, {
"label": "SPIRITS",
"value": {
"brandSetCode": 1,
"bannerColor": null,
"fontColor": null
}
}
];
}]);
</script>
<div ng-controller="ExampleController">
<select name="brand" ng-init="initSelectItem = mySelectableItems[0].value"
data-ng-model="initSelectItem"
data-ng-options="brand.value as brand.label for brand in mySelectableItems">
</select>
</div>
</body>
</html>
I'm populating a dropdown list from an object. I want to set the related model value as binded object's "text". But also I have to send a parameter (binded object's value) for a function. I can do this. But Model's value is getting all the object. I want only get the object's Text.
var app = angular.module("App", []);
app.controller("Controller", function($scope) {
$scope.list = [{
"Text": "75.000",
"Value": 1
}, {
"Text": "100.000",
"Value": 2
}, {
"Text": "150.000",
"Value": 3
}, {
"Text": "250.000",
"Value": 4
}];
$scope.GetVal = function(val) {
alert(val);
};
});
<!DOCTYPE html>
<html ng-app="App">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<meta charset="utf-8">
<title></title>
</head>
<body ng-controller="Controller">
<select ng-model="model" ng-options="item as item.Text for item in list" ng-change="GetVal(model.Value)">
</select>
<pre>
my model: {{model}}
</pre>
</body>
</html>
My Codes as seen below. Can you help please?
As per my understanding I have updated the cod please check and let me know if this is what u need.
<!DOCTYPE html>
<html ng-app="App">
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<meta charset="utf-8">
<script src="script.js"></script>
<title></title>
</head>
<body ng-controller="Controller">
<select ng-model="model" ng-options="item as item.Text for item in list" ng-change="GetVal(model)">
<option value= "" disabled="">select value</option>
</select>
<pre>
my model: {{model.Text}}
</pre>
</body>
</html>
// Code goes here
var app = angular.module("App", []);
app.controller("Controller", function($scope) {
$scope.list = [{
"Text": "75.000",
"Value": 1
}, {
"Text": "100.000",
"Value": 2
}, {
"Text": "150.000",
"Value": 3
}, {
"Text": "250.000",
"Value": 4
}];
$scope.GetVal = function(val) {
alert(val.Value);
};
});
Basar,
You will need to change the ng-repeat as below
<!DOCTYPE html>
<html ng-app="App">
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<meta charset="utf-8">
<script src="script.js"></script>
<title></title>
</head>
<body ng-controller="Controller">
<select ng-model="model" ng-options="item as item.Value for item in list" ng-change="GetVal(model)">
<option value= "" disabled="">select value</option>
</select>
<pre>
my model: {{model.Value}}
</pre>
</body>
</html>
sen,
Do you wish to bind only Text to your model? or Text and Value both?
If you only wish to bind Text, please check updated plnk.
I know, this is an old question.