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.
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 have a paragraph element in html. The element is visible only if a value is true.I have used ng-if to check that. I am trying to access the element through getElementByID but it returns null.
However i am able to access the other paragraph element in the html where ng-if is not used. How do i access the paragraph element and get the value which is bound with angular directive?
Html
<!DOCTYPE html>
<html ng-app="testApp">
<head>
<script data-require="angular.js#*" data-semver="2.0.0-alpha.31" src="https://code.angularjs.org/1.4.0/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="pull-right" style="margin-top:50px;margin-right:100px" ng-controller="MainController">
<div>
<p id="link" ng-if="user.isAdmin">New Link</p>
<p id="test">
</div>
{{value}}
</div>
</body>
</html>
Angular JS
var app = angular.module('testApp',[]);
app.controller('MainController', ['$scope', function($scope) {
$scope.user={};
$scope.today = new Date();
$scope.user.isAdmin=true;
$scope.value = "Test123";
var objstatic = document.getElementById('link');
console.log(objstatic);//returns null
var objdynamic = document.getElementById('test');
console.log(objdynamic);
objdynamic.innerHTML="Dynamic Test";
}]);
Working copy is updated here Working Demo
The problem is that you're trying to access the element before the digest cycle has rendered it.
If you change the code to use $timeout then you will see the element
$timeout(function() {
var objstatic = document.getElementById('lnkmanage');
console.log(objstatic);
}, 0);
Use watch and check for change in the scope variable.
$scope.$watch('user.isAdmin', function(newValue, oldValue) {
if($scope.user.isAdmin) {
var objstatic = document.getElementById('lnkmanage');
console.log(objstatic);
}
});
Try this
angular.element(document.getElementById('lnkmanage')).scope().$apply()
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'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.