ng-bind not updating after closing modal form - angularjs

I have a view with one list item. After user clicked on this item, the modal form show. When user change value and close modal, the item-not not updating.
View:
<ion-view ng-controller="settingsController">
<ion-content>
<div class="list">
<ion-item class="item-icon-left" ng-click="openLanguageModal()">
<i class="icon ion-chatboxes"></i>
{{'Language'| translate}}
<span class="item-note">
<div ng-bind="choice"></div>
</span>
</ion-item>
</div>
</ion-content>
<script id="language-modal.html" type="text/ng-template">
<div class="modal">
<ion-header-bar>
<!-- <button class="button button-full button-dark" ng-click="closeLanguageModal()">{{'Done' | translate}}</button> -->
<button class="button button-clear button-positive pull-right" ng-click="closeLanguageModal()">
{{'Done' | translate}}
</button>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-radio ng-model="choice" ng-value="'en'"> English </ion-radio>
<ion-radio ng-model="choice" ng-value="'ru'"> Русский </ion-radio>
</ion-list>
</ion-content>
</div>
</script>
</ion-view>
Controller:
app.controller('settingsController', function($scope, $ionicModal) {
$ionicModal.fromTemplateUrl('language-modal.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.languageModal = modal;
})
$scope.choice = "en";
$scope.openLanguageModal = function() {
$scope.languageModal.show();
}
$scope.closeLanguageModal = function() {
$scope.languageModal.hide();
};
$scope.$on('$destroy', function() {
$scope.languageModal.remove();
});
});
I dont understand why the ng-bind didnt updates, help please

Try to use:
$scope.model.choice = "en";
in a main Controller (so that all other view controllers could inheritate this info).
and in all view (settings and language-modal) modify to:
ng-model="model.choice"
due to prototypal inheritance...
Here it is a working demo: http://codepen.io/beaver71/pen/XXaROB

Related

How can I get information from a select with angularjs and ionic1?

How can I get information from a select with angularjs and ionic1?
I'm trying to get the information from a JSON and put in the "select", until that part I got to do. But when I select the information from this "select" and try to get the id and the name that is in the "select", it is not showing.
My html -> igreja.html
<ion-view view-title="Igrejas">
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
<ion-content>
<form ng-submit="realizarLogin()">
<div class="list list-inset">
<ion-item class="item-input item-select--full">
<div class="input-label">
Selecione a sua igreja
</div>
<select ng-model="login" ng-options="y.Nome for (x,y) in igrejaEscolhida">
</select>
<h1> test: {{login.Nome}}</h1>
<h1> id: {{login.Id}} </h1>
</ion-item>
<button class="button button-block button-positive" type="submit">Entrar</button>
</div>
</form>
</ion-content>
</ion-view>
My routes.js
.state('app.igrejas', {
url: '/igrejas',
views: {
'menuContent': {
templateUrl: 'templates/igrejas.html',
controller: 'igrejasController'
}
}
})
My controller.js
.controller('igrejasController', function($scope, $ionicModal, $timeout, $stateParams, $ionicPopup, $state, $rootScope, $http, $sce) {
$http.get(linkIgrejas).then(function(data){
$scope.igrejaEscolhida = data.data;
console.log($scope.igrejaEscolhida);
$scope.igrejaEscolhida.forEach(function(element, index, array){
element.Id = element.Id;
element.Nome = element.Nome;
console.log(element.Id);
console.log(element.Nome);
})
})
$rootScope.login = {};
$scope.realizarLogin = function() {
var dadosDoLogin = {
params : {
nome: $rootScope.login.nome
}
}
$scope.selectUpdated = function(optionSelected) {
console.log('Updated');
console.log(optionSelected);
};
console.log($scope.selectUpdated);
$scope.loginF.Nome;
$scope.loginF.Id;
console.log($scope.loginF.Nome);
console.log($scope.loginF.Id);
$rootScope.teste = $rootScope.login.nome;
$scope.nomeIgreja = $rootScope.login.nome;
$scope.idIgreja = $rootScope.login.Id;
$rootScope.login.Id;
console.log($scope.nomeIgreja);
console.log($scope.idIgreja);
};
})
Could someone help me or show me what I'm doing wrong in the "select"?
Try to put the value itself to represent The id
<option ng-repeat="igrejaEscolhidas in igrejaEscolhida" value="{{ igrejaEscolhidas.Id }}">
{{ igrejaEscolhidas.Nome }}
</option>
then the ng-model with the select will take the Id from the value of the selected option.
I changed my Igrejas.html and controller.js
Igrejas.html
<ion-view view-title="Igrejas">
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
<ion-content>
<form ng-submit="realizarLogin()">
<div class="list list-inset">
<ion-item class="item-input item-select--full">
<div class="input-label">
Selecione a sua igreja
</div>
<select ng-model="login.nome">
<option ng-repeat="igrejaEscolhidas in igrejaEscolhida">
{{ igrejaEscolhidas.Nome }}
{{ igrejaEscolhidas.Id }}
</option>
</select>
</ion-item>
<button class="button button-block button-positive" type="submit">Entrar</button>
</div>
</form>
</ion-content>
</ion-view>
My controller.js
.controller('igrejasController', function($scope, $ionicModal, $timeout, $stateParams, $ionicPopup, $state, $rootScope, $http, $sce) {
$http.get(linkIgrejas).then(function(data){
$scope.igrejaEscolhida = data.data;
console.log($scope.igrejaEscolhida);
$scope.igrejaEscolhida.forEach(function(element, index, array){
element.Id = element.Id;
element.Nome = element.Nome;
console.log(element.Id);
console.log(element.Nome);
})
})
$rootScope.login = {};
$scope.realizarLogin = function() {
$rootScope.teste = $rootScope.login.nome;
console.log($rootScope.teste);
};
})
When I tested this way I managed to get the id and name, but they are together like this in this print, I need to get them separated, how do they separate them in angularjs?
My print :
http://prntscr.com/fhg4py
Or someone knows how I can get the id and separate name, being that I have this id and that name will come from the same select? I got them together.

Generate dynamic Modals using Ionic

I want to generate dynamic modals using Ionic, and have created a controller that dynamically has the id of the ng-repeat item which is linked to a unique modal. The modal is under a under the ion-item
Controller
$scope.showModal = function(id){
$ionicModal.fromTemplateUrl(id+'-modal.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
});
window.modal.show();
$scope.openModal = function() {
$scope.modal.show();
};
$scope.closeModal = function() {
$scope.modal.hide();
};
}
View
< ion-item collection-repeat="hist in history" ng-show="history.length" style="background:none;border:none">
<div class="list card" ng-click="showModal(id)">
<div class="item ">
<div class="row" >
<div class="col col-25" > <span style="float:left;padding-top:0.4em"><i class="ion-clock largericon"></i></span> </div>
<div class="col col-75" align="left">
<div style="float:left">
<div style="font-size:2em">{{hist.session_time}} </div>
<div style="color:#999"> {{hist.human_date}}</div>
</div>
</div>
</div>
</div>
</div>
<script id="1-modal.html" type="text/ng-template">
<ion-modal-view style="background:#24112B">
<ion-header-bar class="bar bar-header bar-royal">
<h1 class="title">Session Started... </h1>
<button class="button button-clear button-primary" ng-click="modal.hide()"><i class="ion-close-round"></i></button>
</ion-header-bar>
<ion-content class="padding">
<div style="padding-top:1.3em;padding-bottom:1.3em">
<div class="row" align="center" >
<div class="col col-100" align="center">Start by keeping your repetitions to the beat...</div>
</div>
</div>
</ion-content>
</ion-modal-view>
</script>
</ion-item>
See it working: https://plnkr.co/edit/UcoU4i?p=preview
$scope.showModal = function(id){
$ionicModal.fromTemplateUrl(id+'-modal.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
$scope.modal.show(); // show modal after it was loaded
});
}
EDIT: Also make sure ng-click="showModal(id)" you pass some actual id...

angular1 & ionic1 update ui-ref after radiobutton selection

I am a bit lost. I try to update the ui-ref of a button, after the user click on one of to radio buttons. The ui-ref gets updated correctly but the automaticly generated href stays the same. What are I am doing wrong?
Code in the view:
<div ng-controller="radiotCtrl">
<div class="list" >
<ion-radio ng-repeat="item in radiotList"
ng-value="item.value"
ng-model="data.radiot">
{{ item.text }}
</ion-radio>
</div>
<div ui-sref='{{ data.radiot }}'> <a id="button14" class=" button button-positive button-block button-outline ">Next</a></div>
</div>
and the controller:
.controller('radiotCtrl', function($scope) {
$scope.radiotList = [
{ text: "Selection 1", value: 'mynav.sele1' },
{ text: "Selection 2", value: 'mynav.sele2' },
];
$scope.data = {
radiot: 'mynav.sele1'
};
});
You should place ui-sref on anchor(a) tag so that it will generate correct href by evaluating state provided to it.
<div>
<a ui-sref='{{ data.radiot }}' id="button14"
class=" button button-positive button-block button-outline ">
Next
</a>
</div>
ui-sref does not support two way data binding. here is the discussion about this topic on github: https://github.com/angular-ui/ui-router/issues/395
a simple and working solution for me was to use ng-click instead:
Code in the view:
<div ng-controller="RadioBuCtrl">
<form class="list ">
<ion-radio ng-model="user.answer" ng-value="'mynav.optionone'">Option 1</ion-radio>
<ion-radio ng-model="user.answer" ng-value="'mynav.optiontwo'">Option 2</ion-radio>
</form>
<a ng-click="submitAnswer(user)" class="button button-positive">Next</a>
</div>
and the controller:
.controller('RadioBuCtrl', function($scope, $state) {
$scope.submitAnswer=function(user){
$state.go(user.answer);
}
});

ion-footer-bar stay on top ion-list?

I'm creating an app and I added ion-footer-bar, the problem is that ion-footer-bar stay on top the ion-list on last record. Looking for any solution I found to use $scope.$broadcast('scroll.resize'); but it not solved my problem.
How could I solve this ?
Controller
var app = angular.module('starter');
app.controller('EmpresaCtrl', function($scope, $state, $ionicLoading, EmpresaAPIService, AppConstants, APP_MESSAGES){
$scope.moreData = false;
var offset = 0;
$scope.items = [];
$scope.loadMore = function(){
EmpresaAPIService.getAllEmpresas(offset)
.success(function(data){
if(data.result.length === 0){
$scope.moreData = true;
}else{
angular.forEach(data.result, function(empresa){
var image = empresa.Empresa.imagem;
empresa.Empresa.imagem = AppConstants.webServiceUrl + "/app/webroot/img/empresas/" + image;
$scope.items.push(empresa);
})
offset += 10;
}
$scope.$broadcast('scroll.infiniteScrollComplete');
$scope.$broadcast('scroll.resize');
})
.error(function(err){
$ionicLoading.show({ template: APP_MESSAGES.internetOut, noBackdrop: true, duration: 2000 });
});
};
$scope.getEmpresa = function(id){
var params = {id:id};
$state.go('tab.detalheEmp', params);
}
});
index.html
<body ng-app="starter" animation="slide-left-right-ios7">
<ion-nav-bar class="bar bar-header bar-assertive" align-title="center">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view>
</ion-nav-view>
<ion-footer-bar class="bar-dark" ng-controller="AnuncioCtrl">
<div ng-model="loading" ng-show="loading">
<img src="img/loading.gif" width="30" height="30">
</div>
<img ng-src="{{banner}}" style="max-width:100%;display:block;margin:0 auto">
</ion-footer-bar>
</body>
empresa.html
<ion-view view-title="Empresas">
<ion-content class="padding" has-footer="true" scroll="true">
<div class="item item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios-search placeholder-icon"></i>
<input type="text" ng-model="pesquisar" placeholder="Pesquisa rápida...">
</label>
</div>
<ion-list>
<ion-item class="item item-thumbnail-left"
ng-repeat="item in items | filter:pesquisar"
type="item-text-wrap"
ng-click="getEmpresa({{item.Empresa.id}})" >
<img ng-src='{{item.Empresa.imagem}}'>
<div style="font-weight:bold;" class="item-text-wrap">{{item.Empresa.nome}}</div>
<div style="font-size:small" class="item-text-wrap">{{item.Empresa.tipo}}</div>
<div style="font-size:small">{{item.Empresa.endereco}}</div>
<div style="font-size:small">{{item.Empresa.telefone}}</div>
<a href="tel:{{item.Empresa.telefone}}" class="button button-small button-balanced icon ion-ios-telephone">
</a>
</ion-item>
<ion-infinite-scroll on-infinite="loadMore();" distance="1%" ng-if='!moreData'></ion-infinite-scroll>
</ion-list>
</ion-content>
</ion-view>
Solved the problem. It simple to solve. I add class on tag <ion-nav-view class="has-footer"> and works like charm.

Ionic: Can ready property 'show' error when trying to open modal form

I am just trying to follow this example.
Here is my code:
angular.module('starter.controllers', [])
.controller('PaymentListCtrl', function ($scope,$ionicModal,$timeout) {
$scope.firstName = "John";
$scope.productItems = [
{
name: 'Product 1',
price: '$50.00'
},
{
name: 'Product 2',
price: '$45.00'
}
];
$scope.message = 'Everyone come and see how good I look!';
$ionicModal.fromTemplateUrl('modal_transaction_code.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal
})
$scope.openModal = function() {
$scope.modal.show()
}
$scope.closeModal = function() {
$scope.modal.hide();
};
$scope.$on('$destroy', function() {
$scope.modal.remove();
});
});
Modal Form
<label class="item item-radio" id="hashtagRadio" ng-controller="PaymentListCtrl">
<input type="radio" name="settings-group" value="search">
<div class="item-content">
<span class="ion-pound"></span> <span id="hashtagInput">MODAL FORM</span>
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
its simple..!
<body ng-app="starter" ng-controller="PaymentListCtrl">
<ion-pane>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-content>
<button
class="button button-full button-assertive"
style = "margin-top: 0px;"
ng-click = "openModal()">
Open modal
</button>
</ion-content>
</ion-pane>
</body>
</html>
<script id="modal_transaction_code.html" type="text/ng-template">
<ion-modal-view class="mdx-modal" >
<ion-header-bar class="dark">
<div class="title text-center">Hola</div>
<button class="button button-clear ion-close" ng-click="closeModal()"></button>
</ion-header-bar>
<ion-view>
<ion-content class=" content-stable" >
<label class="item item-radio" >
<input type="radio" name="settings-group" value="search">
<div class="item-content">
<span class="ion-pound"></span> <span >MODAL FORM</span>
</div>
<i class="radio-icon ion-checkmark"></i>
</label>
</ion-content>
</ion-view>
</ion-modal-view>
</script>
make sure, above code remains in same .html file
and PaymentListCtrl controller code is right..!
hope u make it..!

Resources