I'm just getting into angular and onsen-ui and ran into a simple problem. I'm hoping the answer is trivial.
I have a ons-switch which I want to execute code in my controller when the switch is changed:
<ons-switch var="mark_as_favorite" onchange="toggleFavorite()"/>
This results in a toggleFavorite is not defined. This makes sense, because the scope is probably different. So how do I access the controller method from the ons-switch?
--Keith
If you are unfamiliar with AngularJS, use var attribute. var attribute dispose a Onsen UI element as a global variable.
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="components/loader.js"></script>
<link rel="stylesheet" href="components/loader.css">
<link rel="stylesheet" href="css/style.css">
<script>
ons.bootstrap();
function checkIsSwitchEnabled() {
// mySwitch is disposed as a global variable. So mySwitch is accessible from everywhere.
var isChecked = mySwitch.isChecked();
alert(isChecked);
}
</script>
</head>
<body>
<ons-navigator title="Navigator" var="myNavigator" page="page1.html">
</ons-navigator>
</body>
</html>
page1.html
<ons-page>
<div style="text-align: center">
<br/>
<br/>
<br/>
<ons-switch var='mySwitch' onchange='checkIsSwitchEnabled()'></ons-switch>
</div>
</ons-page>
this is what i did..
html
<ons-page ng-controller="yourcntrl">
<ons-switch modifier="list-item" ng-model="obj.IsSelected" ng-change="switchTrigger(obj)"></ons-switch>
</ons-page>
Js
myApp.controller('yourcntrl', function ($scope) {
ons.ready(function () {
$scope.switchTrigger= function (obj) {
alert(obj.IsSelected);
}
});
}
If you use the ngModel directive, Onsen will apply that model to the underlying checkbox and your variable will be updated automatically on change
<ons-switch ng-model="mark_as_favorite">
This is especially useful if you need to update other things on the page as they will update automatically. I use this to show and hide additional options based on the checkbox value and to apply conditional classes:
<div class="example" ng-class="{favorite: mark_as_favorite==true}">Some content</div>
You can use the ng-change attribute to execute code when the ons-switch is toggled.
Example:
<ons-page ng-controller="MyCtrl">
<ons-switch ng-model="MyCtrl.switchState" ng-change="MyCtrl.toggleSwitch(event)">/ons-switch>
</ons-page>
Now you can use event.value to access the boolean if the switch is on or off.
Related
I have a directive to display a bootstrap's popover where user can update some value. The problem is that my value is not visible as an input's value (it's bind, I can edit it). Same value is visible inside the popover just next to the input.
HTML
<div custom-popover popover-html="<div><span>{{costPrice}}</span><input type='text' ng-model='costPrice' /></div>"></div>
JS
$(elem).popover({
trigger: 'manual',
html: true,
content: () => {
var content = $compile(attr.popoverHtml)(scope);
return content;
},
placement: 'bottom'
});
Demo
It's of course some piece of whole project only, but it shows the issue. Any idea of how to make this value visible inside the input?
I think I finally figured out what's the issue.
You are using jquery for pop-over as it's not a good practice to use the jquery code with angular
Here in your case you are using angular and what ng-model does is it continuously watch on the element value and if it's change it calls the digest cycle to update all the values as per the model and vice versa.
So, as you have given the angular code to jquery content function it can cause the angular to stop watching for costPrice which you can see in popover if you implement it by ui-bootstrap popover or any other angular third party popovers then you can see the effects. Here is the code for that,
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="PopoverDemoCtrl">
<button style="margin:70px;" uib-popover-template="dynamicPopover.templateUrl" popover-placement="bottom-right" popover-title="{{dynamicPopover.title}}"
type="button" class="btn btn-default">Popover With Template</button>
<script type="text/ng-template" id="myPopoverTemplate.html">
<div>{{dynamicPopover.content}}</div>
<div class="form-group">
<label>Popup Title:</label>
<input type="text" ng-model="dynamicPopover.content" class="form-control">
</div>
</script>
<script>
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('PopoverDemoCtrl', function ($scope, $sce) {
$scope.dynamicPopover = {
content: 'Hello, World!',
templateUrl: 'myPopoverTemplate.html',
title: 'Title'
};
});
</script>
</div>
</body>
</html>
So as I said you gave the html with angular code to jquery to handle it and jquery cant handle the angular code so you get the error.
Hopefully this will help :)
It works normally, but doesn't work after an ngClick.
Why is this?
How should this be dealt with if you do want it to work after an ngClick?
It actually works in the snippet below, but doesn't work in this Plunker, and also doesn't work in my app.
It also never works more than once in any of the three places, and I don't know why that is.
angular
.module('app', ['ui.bootstrap'])
.controller('MainController', MainController)
;
function MainController() {
var vm = this;
vm.updateSuccess = false;
vm.closeUpdateSuccess = function() {
console.log('closeUpdateSuccess');
vm.updateSuccess = false;
};
vm.submit = function() {
vm.updateSuccess = true;
};
}
<!DOCTYPE html>
<html ng-app='app'>
<head>
<link data-require="bootstrap-css#3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="angular.js#1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
<script data-require="ui-bootstrap#0.13.3" data-semver="0.13.3" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js'></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller='MainController as vm'>
<alert ng-show='vm.updateSuccess' type='success' close='vm.closeUpdateSuccess()' dismiss-on-timeout='2000'>
Successfully updated!
</alert>
<h1>Test Text</h1>
<button ng-click='vm.submit()'>Submit</button>
</div>
</body>
</html>
The problem is you are not using the alert directive correctly. It is working as designed and you can see this by looking at the console in your browser. When the page is rendered, two seconds later your logging statement is executed. The alert directive doesn't know or care whether or not it is visible. Angular will execute the directive when it is added to the DOM. For ng-show as you are using, it is only ever added once. You could use ng-if to achieve the desired behavior or, as I say below, ng-repeat if you want the ability to display multiple alerts.
Look at our examples here and see how we're using an array to store them and the HTML code to display them via an ng-repeat.
your are using angular-ui but you are trying to execute native javascript function, try to use the angular in your js file.1 So you need to implement it with so that directive could call it,
<alert type="danger" close='closeUpdateSuccess()' ng-if="show"
dismiss-on-timeout="2000">Something happened.</alert>
and in controller:
$scope.show = true;
$scope.closeUpdateSuccess() = function(index) {
$scope.show = false;
};
I am using an javascript object as model for select menu, and ng-options also have object as the value property. I want the select menu to be pre-selected based on the model value.
My html code,
<!DOCTYPE html>
<html>
<head>
<script src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3" data-require="angular.js#*"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body data-ng-app="myApp" data-ng-controller="MyCtrl as vm">
<select data-ng-model="vm.model" data-ng-options="option as option.studentName for option in vm.options"></select>
<br>
<div>Model : {{vm.model}}</div>
<br>
<div>Options :<br>[ <div data-ng-repeat='option in vm.options'>{{option}}</div></div>
]
</body>
</html>
Script,
// Code goes here
angular.module('myApp',[]);
angular.module('myApp').
controller('MyCtrl',MyCtrl);
function MyCtrl(){
var vm = this;
vm.model = {studentId:1,studentName:'Dheepan'};
vm.options = [{studentId:1,studentName:'Dheepan'},
{studentId:2,studentName:'Raju'}
];
}
Plunker here.
I can understand that since ng-model and option are having different reference, it is not getting selected by default. Is there any way to do it?
You can to use track by to define with field will be finded:
<select data-ng-model="vm.model"
data-ng-options="option as option.studentName for option in vm.options track by option.id"></select>
(your updated jsfiddle: http://embed.plnkr.co/6zNpJA4AsY50bpOQwnLl/preview)
You have to use option.studentId as option.studentName to bind studentId for selected studentName.
here is updated plunker
Try this :
<select data-ng-model="vm.model" data-ng-change="vm.changeStudent(vm.model)" data-ng-options="option.studentId as option.studentName for option in vm.options"></select>
I added ng-change to bind value and display on page.
I am trying to follow the example here for pagination.
I have was able to get to a stage where I am able to show the new page number, but I am not able to fire a click event. What can I do to trigger data-ng-click="setPage()" on the pager in the example below
<!doctype html>
<html ng-app="PagingModule">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<script type="text/javascript" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.5.0.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css"
rel="stylesheet">
<script type="text/javascript">
var PagingModule = angular.module('PagingModule', ['ui.bootstrap']);
PagingModule.controller('PaginationCtrl', function PaginationCtrl($scope) {
$scope.noOfPages = 7;
$scope.currentPage = 1;
$scope.setPage = function () {
alert("in");//I am unable to reach this code
};
}
);
</script>
</head>
<body>
<div ng-controller="PaginationCtrl" class="well well-small">
<pagination data-ng-click="setPage()" boundary-links="true" num-pages="noOfPages"
current-page="currentPage" class="pagination-small" previous-text="‹"
next-text="›" first-text="«" last-text="»"></pagination>
{{currentPage}}
</div>
</body>
</html>
Use ng-change
Angular bootstrap pagination can use the ng-change attribute. It represents a function which may be called when the paging is changed. Get the current page using ng-model:
<pagination ... ng-change="setPage()" ng-model="current_page"></pagination>
For older versions <= 0.11
You can define a function in controller and pass it an attribute using on-select-change:
<pagination ... on-select-change="setPage(page)"></pagination>
See more here:
https://github.com/angular-ui/bootstrap/blob/master/src/pagination/docs/readme.md
See the breaking change to the code here.
There is no data-ng-click attribute for the pagination directive of angular-ui. Clicking on one of the page numbers sets the $scope.currentPage variable in your controller, or whatever you set in the attribute current-page="currentPage"
You could set up a $scope.$watch on that variable to react to changes.
My templates contain JS, as they are called JS is not executed, you have an idea please.
For example in my JS file script.js, i have methods that apply to HTML elements in my templtes and it does not work, an idea please.
Example :
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body ng-app>
<ng-include src="'header.html'"></ng-include>
<script src="angular.js"></script>
<script src="jquery.js"></script>
<script src="script.js"></script>
</body>
</html>
header.html
<div id="header">
<div id="logo">AngularJs</div>
<div id="nav"></div>
</div>
script.js
$(document).ready(function(){
$('#nav').html('<ul><li><a href="">Link<a></li></ul>');
});
The script execute well, I feel it does not find the element div#nav.
The solution provided by Youssef can be made "more Angular", and it will not require jQuery:
<!-- template2.html -->
<script type="text/ng-template" id="template2.html">
<p ng-class="color">Content of template2.html</p>
</script>
$scope.myFunction = function() {
$scope.color = 'red';
}
http://jsfiddle.net/mrajcok/MfHa6/
In the Angular world, we try to change model properties (e.g., $scope.color) and let the view update automatically. We try to not look up elements by ID or jQuery selectors, and we try to avoid DOM manipulation in the controller -- e.g., $('#tpl2').addClass('red');
Sorry, I read wrong a part of your question, my mistake.
The DOM ready statement of jQuery will probably not work correctly. What you can do is on your ngInclude tag add a onload="FUNCTION_NAME" that contains the DOM edition you indicated inside the script.js
For more information have a look at the documentation here: http://code.angularjs.org/1.0.1/docs-1.0.1/api/ng.directive:ngInclude
--- Old Post ---
#YoussefElMontaser, you don't have to put the quotes on the ngInclude:
<ng-include src="header.html"></ng-include>
probably that is what is wrong with your script not going forward.
Let me know if that worked.
I found the solution:
http://jsfiddle.net/esjeY/
HTML
<div ng-app="">
<div ng-controller="Ctrl">
<select ng-model="template" ng-options="t.name for t in templates">
<option value="">(blank)</option>
</select>
url of the template: <tt>{{template.url}}</tt>
</div>
<div ng-include src="template.url" onload='myFunction()'></div>
</div>
JS
function Ctrl($scope) {
$scope.templates = [{
name: 'template1.html',
url: 'template1.html'
}, {
name: 'template2.html',
url: 'template2.html'
}];
$scope.template = $scope.templates[0];
$scope.myFunction = function() {
$('#tpl2').addClass('red');
}
}
#guiligan : Thanks for your help.