I've changing a $scope variable dynamically but Ionic doens't detect the change:
In my controller:
$scope.something = "something" ;
And in my ion-box I see $scope.something, but when try to set a new value to $scope.something ionic slide box doesn't detect the change. If I do the new value has been set..
console.log($scope.something) // The new value
A lot of people says that with $ionicBoxDelegate.update() is enough but doesn't work me. I also tyied all options that I've seen on Internet, but there is no way.
My code works because if I move it to a normal view, out of a slide, runs fine. Using the same code with the same controller.
Is a mystery. Any idea?
If the scope isn't updating correctly you can use $scope.$apply() to force angular to re-evaluate the scope.
I just made a codepen. Will this help?
http://codepen.io/nabinkumarn/pen/obVbmN
HTML
<div ng-controller="SlideBoxController as vm">
<div style="height:30px">{{vm.something}}</div>
<ion-slide-box show-pager="true" on-slide-changed="vm.onSlideChanged($index)">
<ion-slide ng-repeat="item in vm.items">
<div class="box">
<h2>{{item.title}}</h2>
<p>{{item.desc}}</p>
</div>
</ion-slide>
</ion-slide-box>
</div>
JS
vm.something=1
vm.onSlideChanged = function(slideIndex) {
vm.something ++;
};
It would be useful to see your code, in particular, how you are updating $scope.something.
I created the snippet below (loosely based on Scott Whittaker's codepen). Is this what you're trying to accomplish:
angular.module('app', ['ionic'])
.controller('SlideBoxController', function($scope) {
$scope.something = "old value";
$scope.items =
[{title: "item 1", desc: "item 1 description"},
{title: "item 2", desc: "item 2 description"}
];
$scope.onSlideChanged = function(slideIndex) {
if (slideIndex === 1) {
$scope.something = "new value";
}
else
{
$scope.something = "old value"
}
};
})
.slider {
height: 300px;
background-color: #eee;
}
.box {
padding: 1em;
}
<html ng-app="app">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Slide Box</title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body>
<ion-header-bar class="bar bar-header bar-calm">
<h2 class="title">Slide Box</h2>
</ion-header-bar>
<ion-content scroll="false">
<div ng-controller="SlideBoxController">
<ion-slide-box show-pager="true" on-slide-changed="onSlideChanged($index)">
<ion-slide ng-repeat="item in items">
<div class="box">
<h3>$scope.something = {{something}}</h3>
<h2>{{item.title}}</h2>
<p>{{item.desc}}</p>
</div>
</ion-slide>
</ion-slide-box>
</div>
</ion-content>
</body>
</html>
The problem was that the model needs a dot. Because I was using it in a filter and and input.
Related
example.. i have a match between team-A and team-B. when i click on team-A, i want to add a class call 'selected' to team-A, and then if i click on team-B i want to remove the 'selected' class from team-A and add it to team-B, if i click on team-B again then i want to remove the class all together. Here is what i have so far in play.ionic.
http://play.ionic.io/app/914bb06d2570
similarly i want it to work for match 2 and 3 as well. very appreciate the help.
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="https://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
<script src="https://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
</head>
<body ng-app="app" ng-controller="matchCtrl">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Matches</h1>
</ion-header-bar>
<ion-content class="padding">
<div ng-repeat="match in schedule" ng-init="{'awayActive': false, 'homeActive': false}">
<div>Match {{match.matchNum}}</div>
<div class="match">
<div class="inline" ng-class="{'selected': awayActive}" ng-click="awayActive = !awayActive">{{match.away}}</div>
vs
<div class="inline" ng-class="{'selected': homeActive}" ng-click="homeActive = !homeActive">{{match.home}}</div>
</div>
</div>
</ion-content>
</ion-pane>
</body>
</html>
js
angular.module('app', ['ionic'])
.controller('matchCtrl', function($scope){
$scope.schedule = [{
matchNum: 1,
away: 'Team A',
home: 'Team B'
},{
matchNum: 2,
away: 'Team C',
home: 'Team D'
},{
matchNum: 3,
away: 'Team E',
home: 'Team F'
}];
});
css
.selected {
border: 2px solid blue;
}
If you use a common variable assigned to each schedule array object you can set defaults if desired, but even if you just default to nothing it will allow an easy switch between home and away selections, like so:
<div ng-repeat="match in schedule" ng-init="{'awayActive': false, 'homeActive': false}" ng-init="match.selection = ''">
<div>Match {{match.matchNum}}</div>
<div class="match">
<div class="inline" ng-class="{'selected': match.selection == 'away'}" ng-click="match.selection = 'away';">{{match.away}}</div>
vs
<div class="inline" ng-class="{'selected': match.selection == 'home'}" ng-click="match.selection = 'home';">{{match.home}}</div>
</div>
</div>
Demo: http://play.ionic.io/app/7a63c124586b
Swipe is not working in Carousel in ui-bootstrap v2.1.4 whereas it is working fine with v1.3.3
Is it any syntax change in new version that is causing error?
OR is it a bug in UI-Bootstrap?
Carousel docs mention that swipe is supported.
The carousel also offers support for touchscreen devices in the form of swiping. To enable swiping, load the ngTouch module as a dependency.
Plunker: https://plnkr.co/edit/odlDYR?p=preview
(For ease of swiping, plunker can be opened on mobile with QR code.)
var app = angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngTouch', 'ngSanitize', 'ui.bootstrap']);
app.controller('CarouselDemoCtrl', function ($scope) {
$scope.myInterval = 0;
$scope.noWrapSlides = false;
$scope.active = 0;
var slides = $scope.slides = [];
var currIndex = 0;
$scope.addSlide = function() {
var newWidth = 600 + slides.length + 1;
slides.push({
image: '//unsplash.it/' + newWidth + '/300',
text: ['Nice image','Awesome photograph','That is so cool','I love that'][slides.length % 4],
id: currIndex++
});
};
for (var i = 0; i < 4; i++) {
$scope.addSlide();
}
});
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-touch.js"></script>
<!-- v1.3.3 swipe works; v2.1.4 swipe does not work -->
<!--<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.3.js"></script>-->
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.1.4.js"></script>
<script src="carousel.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="CarouselDemoCtrl">
<div style="height: 305px">
<div uib-carousel active="active" interval="myInterval" no-wrap="noWrapSlides">
<div uib-slide ng-repeat="slide in slides track by slide.id" index="slide.id">
<img ng-src="{{slide.image}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{slide.id}}</h4>
<p>{{slide.text}}</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Contrary to docs, Swipe is not supported in Carousel from v2.0.0 till v2.1.4 (at least)
It is mentioned is in changelog
carousel: Due to the removal of replace: true, this causes a slight HTML structure change to the carousel and the slide elements - see documentation demos to see how it changes. This also caused removal of the ngTouch built in support - if one is using ng-touch, one needs to add the ng-swipe-left and ng-swipe-right directives to the carousel element with relevant logic.
To enable swipe, specify a custom template using template-url and use ng-swipe-* directives there. E.g.
<div class="carousel-inner"
ng-swipe-left="$parent.vm.next()"
ng-swipe-right="$parent.vm.prev()"
ng-transclude>
</div>
Ref: https://github.com/angular-ui/bootstrap/issues/6277
Try this
Another approach where we change the active slide scope variable.
Using
Angular 1.6.6
ngTouch 1.6.6
UI Bootstrap 2.5.0
Template
<div uib-carousel active="active" class="carousel-inner" role="listbox" interval="myInterval" no-wrap="noWrapSlides"
ng-swipe-left="changeSlide('left')"
ng-swipe-right="changeSlide('right')">
<div uib-slide ng-repeat="slide in slides" class="wrapper">
<div style="position:relative;">
<img class="img-responsive" ng-src="{{slide.url}}"></div>
</div>
</div>
</div>
</div>
Controller
$scope.myInterval = 5000;
$scope.noWrapSlides = false;
$scope.active = 0;
$scope.slides = [{url: 'image1.jpeg'},{url: 'image2.jpg'}];
$scope.changeSlide = function (direction) {
var index = $scope.active;
if (direction === 'right') {
$scope.active = (index <= 0 ? 0 : index - 1);
return;
}
if (direction ==='left') {
$scope.active = (index >= ($scope.slides.length - 1) ? ($scope.slides.length - 1) : index + 1);
return;
}
};
I am using google places API in my ionic/cordova, angular based mobile app in android platform.
I am able to get search results from text field value using API but when i select an option by simply clicking on one of search results, the text box remains empty.
But when I press and keep holding the search result option for 2-3 secs, that option is selected.
It seems weird to me but it is happening.
place_changed event is not getting triggered on quick tap.
I really dont know what can be the cause of this issue? I have tried Faskclick.js to eliminate 300 ms but that didnt work though I think this issue is not related to 300 ms delay.
My code:
function initialize() {
var autocomplete = new google.maps.places.Autocomplete(input, options);
};
Please help me out here.
I used ngMap and angular-google-places-autocomplete together in the following example.
Hope it helps.
angular.module('app', ['ionic', 'google.places', 'ngMap'])
.controller('MapCtrl', ['$scope', 'NgMap',
function ($scope, NgMap) {
$scope.location = null;
NgMap.getMap().then(function (map) {
console.log("getMap");
$scope.map = map;
});
$scope.$on('g-places-autocomplete:select', function(event, place) {
console.log('new location: ' + JSON.stringify(place));
$scope.data = {
lat: place.geometry.location.lat(),
lng: place.geometry.location.lng()
};
$scope.map.setCenter(place.geometry.location);
console.log($scope.data);
});
}
]);
.map {
width: 100%;
height: 500px !important;
}
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<script src="https://maps.google.com/maps/api/js?libraries=visualization,drawing,geometry,places"></script>
<link href="http://code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<script src="https://rawgit.com/kuhnza/angular-google-places-autocomplete/master/dist/autocomplete.min.js"></script>
<link href="https://rawgit.com/kuhnza/angular-google-places-autocomplete/master/dist/autocomplete.min.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
<script src="app.js"></script>
</head>
<body ng-app="app" ng-controller="MapCtrl">
<ion-pane>
<ion-header-bar class="bar-positive">
<h1 class="title">Ionic map</h1>
</ion-header-bar>
<ion-content class="has-header padding">
<div class="item item-input-inset">
<label class="item-input-wrapper">
<input type="text" g-places-autocomplete ng-model="location" placeholder="Insert address/location"/>
</label>
<button ng-click="location = ''" class="button ion-android-close input-button button-small" ng-show="location"></button>
</div>
<ng-map zoom="6" class="map">
<marker position="{{data.lat}}, {{data.lng}}"></marker>
</ng-map>
</ion-content>
</ion-pane>
</body>
</html>
I didnt find its solution but https://github.com/stephjang/placecomplete is a great plugin as work around :)
I'm using an ons-modal to show a loading text and spinner icon when the app is fetching some data.
The code is as follows:
<ons-modal var="loadingModal">
<ons-icon icon="ion-load-c" spin="true"></ons-icon>
<br><br>
Cargando...
<br>
</ons-modal>
I can correctly show an hide it using loadingModal.show(); and loadingModal.hide();
But how would I know in Angular if it is shown or hidden?
Update
Apparently my not-so-elegant solution is not not so elegant after all :D
Here is a pull request that shows the method isShown() that should be available
soon I guess
Internally the function looks similar to whats in this answer
isShown() {
return this.style.display !== 'none';
}
Not a super elegant solution, but it works
if( $scope.loadingModal._element.css('display') == 'none'){
// hidden now
}else{
// visible now
}
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>Modal | Onsen UI</title>
<link rel="stylesheet" href="https://rawgit.com/OnsenUI/OnsenUI/master/demo/styles/app.css"/>
<link rel="stylesheet" href="https://rawgit.com/OnsenUI/OnsenUI/master/build/css/onsenui.css">
<link rel="stylesheet" href="https://rawgit.com/OnsenUI/OnsenUI/master/build/css/onsen-css-components.css">
<script src="https://rawgit.com/OnsenUI/OnsenUI/master/build/js/angular/angular.js"></script>
<script src="https://rawgit.com/OnsenUI/OnsenUI/master/build/js/onsenui.js"></script>
<script src="https://rawgit.com/OnsenUI/OnsenUI/master/demo/app.js"></script>
<script>
function check($el){
return $el.css('display') === 'none' ? 'hidden' : 'visible';
}
angular.module('myApp').controller('PageController', function($scope) {
$scope.open = function() {
$scope.app.modal.show();
alert(check($scope.app.modal._element));
setTimeout(function() {
$scope.app.modal.hide();
alert(check($scope.app.modal._element));
}, 2000);
};
});
</script>
</head>
<body ng-controller="PageController">
<ons-navigator>
<ons-modal var="app.modal">
<ons-icon icon="ion-load-c" spin="true"></ons-icon>
<br><br>
Cargando...
<br>
</ons-modal>
<ons-toolbar>
<div class="center">Modal</div>
</ons-toolbar>
<p style="text-align: center">
<ons-button modifier="light" ng-click="open();">Open Modal</ons-button>
</p>
</ons-navigator>
</body>
</html>
I am blocked and can not be as follow, to see if someone could help me ... (sorry for my bad English and my explanation).
I have this pen where I have an input to insert a value or load default. NgStorage I use to store the value in memory if the app is reloaded and always load the user types in the input (localStorage).
After I have a dropdown where I choose one of the two numbers that charged me one of two templates that I have created (or template1 template2) in the following div.
Far right, but now I would like to save that result in any way for the next div (red border) perform a simple arithmetic operation as chosen above using a scope variable declared in the driver from the start.
Any help please?
Here my pen (I use ionic): http://codepen.io/maestromutenrroy/pen/ukwIC
<html ng-app="ionicApp"><head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic....</title>
<link href="//code.ionicframework.com/1.0.0-beta.12/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/1.0.0-beta.12/js/ionic.bundle.js"></script>
<script src="https://rawgithub.com/gsklee/ngStorage/master/ngStorage.js"></script>
</head>
<body ng-controller="MainCtrl">
<ion-header-bar class="bar-positive">
<h1 class="title">Hello!</h1>
</ion-header-bar>
<br /><br /><br />
<!-- load 11, but I change the valor -->
Write a number: <input type="number" ng-model="$storage.c6" style="border: 1px solid #ddd; padding-left: 10px">
<br>
<!-- select of two templates -->
Select one option:
<select ng-model="template" ng-options="t.name for t in templates">
<option value="">(blank)</option>
</select>
<!-- print a template select -->
<div ng-include src="template.url" onload='myFunction()'></div>
<!-- template1.html -->
<script type="text/ng-template" id="template1.html">
{{1000 - $storage.c6}}
</script>
<!-- template2.html -->
<script type="text/ng-template" id="template2.html">
{{10 - $storage.c6}}
</script>
<br>
<hr />
<div style="border: 2px solid red; padding: 20px">
Now, I would like a same operation (result of template1 or template2 - $storage.c12): .....
</div>
</body>
</html>
angular.module('ionicApp', ['ionic','ngStorage'])
.controller('MainCtrl', function($scope, $localStorage) {
$scope.$storage = $localStorage.$default({
c6: 1,
c12: 2
});
$scope.templates = [{
name: '5',
url: 'template1.html'}
,
{
name: '10',
url: 'template2.html'}];
$scope.template = $scope.templates[0];
})
Thank you!
You can save the results in a scope object and update it inside each template:
<!-- template1.html -->
<script type="text/ng-template" id="template1.html">
{{results.x = 1000 - $storage.c6}}
</script>
<!-- template2.html -->
<script type="text/ng-template" id="template2.html">
{{results.x = 10 - $storage.c6}}
</script>
<div style="border: 2px solid red; padding: 20px">
Now, I would like a same operation (result of template1 or template2 - $storage.c12): ..... {{results.x - $storage.c12}}
</div>
And on the controller:
$scope.results = {};
Demo