I have a slidebox for which I dont want the paging to be seen in the first screen so I added as below:
<ion-slide-box show-pager ="false" on-slide-changed="reportSlideChanged($index, $ionicSlideBoxDelegate)" >
However, I want to change the show-pager in the reportSlideChanged function when the index becomes greater than 0. I tried
.controller('SplashController', function ($scope, $ionicSlideBoxDelegate) {
//$scope.myActiveSlide = 1;
console.log($scope.currentSlide, $ionicSlideBoxDelegate)
$scope.reportSlideChanged = function (slideNum) {
$scope.showPager = true;
$ionicSlideBoxDelegate.update()
}
})
But this does not work.
Hi Hope this will help.
CSS
.no-pager .slider-pager{
display: none;
}
Controller
$scope.pager = true;
$scope.togglePager = function(){
$scope.pager = !$scope.pager;
};
HTML
<ion-slide-box show-pager="true" ng-class="{'no-pager':pager}">
http://codepen.io/anon/pen/NPvmjB
Related
I have three custom directive, say <sample-grid></sample-grid> , <sample-form></sample-form> and <sample-view></sample-view>. These are defined in the following way:
angular.module("MyApp").directive('sampleGrid', [ function() {
return {
scope : {},
restrict: 'EA',
templateUrl : 'view/templates/sample-grid.tmpl.html',
controller : 'SampleGridCtrl',
scope: {
scnid: '=',
}
};
} ]);
I have a main view where I am using <md-tabs> from angular material in following way -
<md-tabs>
<md-tab ng-repeat="tab in myCtrl.pageTabs track by $index">
<md-tab-label>{{tab.tabName}}</md-tab-label>
<md-tab-body>
<div id="tab.tabName" ng-bind-html="tab.tabHTML"></div>
</md-tab-body>
</md-tab>
</md-tabs>
also the controller for this view defined as
angular.module("MyApp").controller("myCtrl",['$log','$scope','$sce', '$compile', function myCtrl ($log,$scope,$sce,$compile) {
var homeScope = this;
homeScope.pageTabs = [];
var newTab = {};
newTab.tabName = "Sample";
newTab.tabHTML = $sce.trustAsHtml("<sample-grid></sample-grid>");
newTab.tabAction = "grid";
homeScope.pageTabs.push(newTab);
var template = angular.element(document.querySelector('#Sample'));
$compile(template)(homeScope);
}])
The requirement is: user will be able to add new tabs in view, and I have to show one of the three custom directives in the view based on the selection. So I have to just push new tab objects into homeScope.pageTabs with the required property.
The problem is : After pushing the tab object, new tab is created but the custom directive does not render into view. I can see it in the console like :
<div id="tab.tabName" ng-bind-html="tab.tabHTML">
<sample-grid></sample-grid>
</div>
I have seen answers here such that I have to use $compile to render it correctly. I tried that, But I could not get the proper solution.
So my question is how I can achieve this functionality? And, is there any other easy and possible way to achieve this?
I have changed your controller logic a little bit. You have to use compile a little bit different.
angular.module("MyApp").controller("myCtrl",['$log','$scope','$sce', '$compile', function myCtrl ($log,$scope,$sce,$compile) {
var homeScope = this;
homeScope.pageTabs = [];
var template = $sce.trustAsHtml("<sample-grid></sample-grid>");
var linkFn = $compile(template);
var content = linkFn(scope);
var newTab = {};
newTab.tabName = "Sample";
newTab.tabHTML = content;
newTab.tabAction = "grid";
homeScope.pageTabs.push(newTab);
}])
I want to change scope vairable data by below code but it is not working. I am not getting any error but it is not working like expected.
$scope.secondcity1 = false;
$scope.hidecity1 = function() {
alert(secondcity1);
$scope.secondcity1 = false;
$scope.city1 = '';
alert(secondcity1);
}
I am using alert(secondcity1); this to show alert box but it is not showing anything,
<div ng-style="{'display':secondcity1 == false?'none':'block'">
<!-- some codes -->
<button type="button" class="remove" ng-click="hidecity1()">-</button>
</div>
above code is also not working. I am expecting to hide the div but it is not hiding it.
Try this, in AngularJs to access objects you have to use $scope like $scope.object
$scope.secondcity1 = false;
$scope.hidecity1 = function() {
alert($scope.secondcity1);
$scope.secondcity1 = false;
$scope.city1 = '';
alert($scope.secondcity1);
}
Your alert should display the $scope variable, otherwise it will be undefined
Change
From
alert(secondcity1);
To
alert($scope.secondcity1);
Could anybody help me with a solution.
I need to make the link disabled (PAY Now) after clicking on that to avoid multi clicking.
<div class="Class1" data-ng-show="ShowButton == 'TRUE'">
PAY NOW</div>
There is no disabled attribute for hyperlinks. If you don't want to do something with that you'll need to add some style into the <a> tag altogether and handle the flag into the controller.
Try this :
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.isDisabled = false;
if($scope.isDisabled === false) {
$scope.PayNow = function() {
$scope.isDisabled = true;
}
}
}]);
.disabled {
cursor: not-allowed;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
PAY NOW
</div>
You can in the PayNow() function create an extra variable which disables the button like so:
JS:
$scope.PayNow = function() {
$scope.DisabledButton = true;
// other code
}
HTML
PAY NOW
In your html
.disabled {
cursor: not-allowed;
}
<a ng-click="PayNow()" ng-class="{'disabled': DisabledButton}">Add</a>
OR
<button ng-click="PayNow()" ng-disabled="DisabledButton">Add</button>
In JS
$scope.DisabledButton = false;
$scope.PayNow = function() {
$scope.DisabledButton = true;
// other code
...
//when you want to re-enable
$scope.DisabledButton = false;
}
i hope if this can help you!!!. So in my example I am using condition to check the length of the array and constraining the button to make more textboxes. Plus you can use count instead.
$scope.technologies = [];
$scope.addtech = function () {
$scope.minus = true;
if ($scope.technologies.length < 3)
$scope.technologies.push({});
}
I´m having some issues with a gallery manager component where you can add/remove the pictures.
This is the html code of the gallery handler:
<img src = '{{snapshot}}' >
<div class = 'md-button l3' is-file ng-model = 'picture' blob-url = 'snapshot'>Upload</div>
<div class = 'md-button l3' ng-click = 'article.pictures.push(picture)'>Add</div>
<div gallery-manager = 'article.pictures'></div>
Below, the directives:
.directive("galleryManager", function($compile){
var controllerFn = function($scope, $element, $attrs){
var self = this;
self.removeItemAt = function($index){
self.pictures.splice($index, 1);
$compile($element)($scope); <--Note this
}
}
var linkFn = function($scope, $element, $attrs){
}
return {
template:"<div gallery-item = 'picture' ng-repeat = 'picture in galleryManagerCtrl.pictures track by $index'></div>",
restrict:"A",
controller:controllerFn,
controllerAs:"galleryManagerCtrl",
bindToController:{
pictures:"=galleryManager",
}
}
})
.directive("galleryItem", function(FileService){
var linkFn = function($scope, $element, $attrs, galleryManagerCtrl){
$scope.galleryItemCtrl.galleryManagerCtrl = galleryManagerCtrl;
}
var controllerFn = function($scope, $element, $attrs){
var self = this;
if ( self.item instanceof File ){
FileService.buildBlobUrl(self.item).then(function(blobUrl){
self.thumb = blobUrl;
})
}
}
return{
template:"<img src = '{{galleryItemCtrl.thumb}}'>"+
"<a class = 'delete' ng-click = 'galleryItemCtrl.galleryManagerCtrl.removeItemAt($index)'>×</span></a>",
restrict:"A",
require:"^galleryManager",
link:linkFn,
controller:controllerFn,
bindToController:{
item:"=galleryItem",
},
controllerAs:"galleryItemCtrl"
}
})
Right now, the directive is working well when adding elements, but problems come when removing items; before using: $compile($element)($scope) after the deletion, in the gallery, always dissapeared the last item, although the pictures array removed the correct item, so I added the $compile line after deleting an item.
The problem is that, although the gallery now does what I want to, it keeps throwing an error after compiling (post the full trace, maybe it can help someone):
angular.js:13920 TypeError: Cannot read property 'insertBefore' of null
at after (http://localhost/www/project/admin/bower_components/angular/angular.js:3644:13)
at JQLite.(anonymous function) [as after] (http://localhost/www/project/admin/bower_components/angular/angular.js:3728:17)
at domInsert (http://localhost/www/project/admin/bower_components/angular/angular.js:5282:35)
at Object.move (http://localhost/www/project/admin/bower_components/angular/angular.js:5488:9)
at ngRepeatAction (http://localhost/www/project/admin/bower_components/angular/angular.js:29865:26)
at $watchCollectionAction (http://localhost/www/project/admin/bower_components/angular/angular.js:17385:13)
at Scope.$digest (http://localhost/www/project/admin/bower_components/angular/angular.js:17524:23)
at ChildScope.$apply (http://localhost/www/project/admin/bower_components/angular/angular.js:17790:24)
at HTMLAnchorElement.<anonymous> (http://localhost/www/project/admin/bower_components/angular/angular.js:25890:23)
at defaultHandlerWrapper (http://localhost/www/project/admin/bower_components/angular/angular.js:3497:11)
That seems to come from watchCollection at ngRepeatDirective.
I have the feeling that I´m missing something basic, but can´t see what is right now, so, here I come to ask before digging into angular code.
Thank you in advance.
EDIT
Added a working sample:
http://codepen.io/sergio0983/pen/rMEMoJ?editors=1010
EDIT 2
Removed $compile from working sample, it makes it work, yes, but throws errors; and besides, I think the real problem is elsewhere. In the working sample, you can see how file names get updated when you delete an item, but the pictures keep their original order.
add addPicture() function to your mainController (which will add constant unique ID ro the picture object):
.controller("mainController", function($scope){
$scope.article = {pictures:[]};
$scope.addPicture = function addPicture (picture) {
// set unique ID
picture.id = $scope.article.pictures.length;
$scope.article.pictures.push(picture);
};
})
change add button HTML to:
<div class='md-button l3' ng-click='addPicture(picture)'>Add</div>
change template of galleryManager to track by picture.id:
<div gallery-item='picture'
ng-repeat='picture in galleryManagerCtrl.pictures track by picture.id'></div>
modify removeItemAt() function, ($compile not needed here):
self.removeItemAt = function removeItemAt (id) {
// find index for the picture with given id
id = self.pictures.findIndex((item) => item.id === id);
self.pictures.splice(id, 1);
}
modified codepen: http://codepen.io/anon/pen/mrZOre?editors=1010
I'm looking for some help on using onsen-ui's dialog component. It seems to be a scope issue.
In my HTML file, I have a dialog template looks like this.
<ons-template id="report.html">
<ons-dialog var="dlg" cancelable>
<h1>{{clicked.name}}</h1>
<ons-button onclick="clickButton()">Click</ons-button>
</ons-dialog>
</ons-template>
And in my controller, I have
$scope.clickButton = function(){
dlg.hide();
}
$scope.dialogs = {};
$scope.show = function(dlg) {
$scope.clicked = {'name':"bar"};
if (!$scope.dialogs[dlg]) {
ons.createDialog(dlg, {parentScope: $scope}).then(function(dialog) {
$scope.dialogs[dlg] = dialog;
dialog.show();
});
} else {
$scope.dialogs[dlg].show();
}
}
The weird part is that I can access "clicked" in the dialog scope, but not "reportButton", they are in the same scope, or at least I can tell.
Here is the codepen link
Thanks in advance!
To call the function from controller scope, you should be ng-click instead of onclick.
<ons-button ng-click="reportButton()">click</ons-button>
Working Codepen