I have a simple Ionic app which consists of a list like this:
<ion-list ng-controller="MainController">
<ion-item ng-repeat="task in tasks">
{{task.title}}
</ion-item>
</ion-list>
In the MainController I add a new item to the tasks collection:
.controller('MainController',function($scope,$ionicPopup){
$scope.tasks = [{title:"Clean dishes"},{title :"File Tax"},{title :"Take Pictures"}];
$scope.task = new Object();
$scope.showAddNewTaskDialog = function() {
var popup = $ionicPopup.show({
template:'<label class="item item-input"> <input ng-model="task.title" type="text" placeholder="Enter Task"/></label>',
title: 'New Task',
scope: $scope,
buttons :[
{ text :'Cancel'},
{
text: '<b>Save</b>',
type: 'button-positive',
onTap: function(e) {
$scope.tasks.push({ title :'new entry'});
}
}
]
});
}
})
But even though I am adding a new item in the tasks the list never refreshes.
Related
I am new to Ionic 1. The problem is click on Submit button the input fields doesn't clear. On button click after posting data to server it reloads the same page but with already entered fields.
html
<div style="margin-left: 20px;margin-right: 20px;margin-top: 55px;">
<div class = "list">
<label class = "item item-input item-stacked-label">
<!-- <span class = "input-label">Name</span> -->
<input type = "text" placeholder = "Name" required ng-model="name" clearInput="true"/>
</label>
</div>
<div class = "list">
<label class = "item item-input item-stacked-label">
<!-- <span class = "input-label">Mobile Number</span> -->
<input type = "tel"maxlength="10" clearInput="true" placeholder = "Mobile No." pattern="[1-9]{1}[0-9]{9}" required ng-model="mobile" />
</label>
</div>
<div class="padding text-right" style="margin-top: -12px;">
<button class="button button-positive " ng-click="enter(name,mobile)" style="width: 100%;">
Submit
</button>
</div>
</div>
js
$scope.enter = function (name,mobile) {
if (name == null) {
var alertPopup = $ionicPopup.alert({
template: 'Please Enter Name!'
});
} else if (mobile == null) {
var alertPopup = $ionicPopup.alert({
template: 'Please Enter Mobile Number!'
});
}
else {
$ionicLoading.show({
template: '<ion-spinner></ion-spinner><p>Loading...</p>'
});
var link = 'http://mountsystem/mobileapi/coreapi.php';
var datasend = $.param({
request_code: 'demo_attendance',
batch_id:$stateParams.batchId,
mobile_no: mobile,
student_name: name,
franchise_id: $scope.userDetails.franchise_id,
entered_by:$scope.userDetails.employee_id
});
console.log(datasend);
$http.post(link, datasend, config)
.success(function (response) {
$ionicLoading.hide();
console.log(response);
if (response.response_code == 'STATUS_OK') {
$scope.list = response;
console.log($scope.list);
var alertPopup = $ionicPopup.alert({
title: 'Hurrayy',
content: 'Successfully Submitted !'
})
} else {
var alertPopup = $ionicPopup.alert({
title: 'Error!',
template: response.msg
});
}
}).error(function (response) {
$ionicLoading.hide();
var alertPopup = $ionicPopup.alert({
title: 'ServerError!',
template: 'ServerError' + response
});
});
}}
I just want as soon as I click submit button both input fields (username and mobile number) will be clear so that I again entered new details.
Try to set the name and telephone variables to "" in your .js file. It will clear the fields in the front.
Also why are you still using Ionic 1. I recommend moving to Ionic 3, waiting the fourth version to be really stable.
Change ng-model variable with below code
<div style="margin-left: 20px;margin-right: 20px;margin-top: 55px;">
<div class = "list">
<label class = "item item-input item-stacked-label">
<!-- <span class = "input-label">Name</span> -->
<input type = "text" placeholder = "Name" required ng-model="data.name" clearInput="true"/>
</label>
</div>
<div class = "list">
<label class = "item item-input item-stacked-label">
<!-- <span class = "input-label">Mobile Number</span> -->
<input type = "tel"maxlength="10" clearInput="true" placeholder = "Mobile No." pattern="[1-9]{1}[0-9]{9}" required ng-model="data.mobile" />
</label>
</div>
<div class="padding text-right" style="margin-top: -12px;">
<button class="button button-positive " ng-click="enter(data.name,data.mobile)" style="width: 100%;">
Submit
</button>
</div>
</div>
$scope.data = {};
$scope.enter = function (name,mobile) {
if (name == null) {
var alertPopup = $ionicPopup.alert({
template: 'Please Enter Name!'
});
} else if (mobile == null) {
var alertPopup = $ionicPopup.alert({
template: 'Please Enter Mobile Number!'
});
}
else {
$ionicLoading.show({
template: '<ion-spinner></ion-spinner><p>Loading...</p>'
});
var link = 'http://mountsystem/mobileapi/coreapi.php';
var datasend = $.param({
request_code: 'demo_attendance',
batch_id:$stateParams.batchId,
mobile_no: mobile,
student_name: name,
franchise_id: $scope.userDetails.franchise_id,
entered_by:$scope.userDetails.employee_id
});
console.log(datasend);
$http.post(link, datasend, config)
.success(function (response) {
$ionicLoading.hide();
console.log(response);
if (response.response_code == 'STATUS_OK') {
$scope.list = response;
console.log($scope.list);
$scope.data.mobile = '';
$scope.data.name = '';
var alertPopup = $ionicPopup.alert({
title: 'Hurrayy',
content: 'Successfully Submitted !'
})
} else {
var alertPopup = $ionicPopup.alert({
title: 'Error!',
template: response.msg
});
}
}).error(function (response) {
$ionicLoading.hide();
var alertPopup = $ionicPopup.alert({
title: 'ServerError!',
template: 'ServerError' + response
});
});
}}
I am quite amazed with the solution but this solution worked for me, the problem was instead of setting a value directly inside $scope object, I was supposed to put it within any object of $scope object like this
<input type="text" placeholder="Enter new todo" ng-model="data.newtodo"> first change model of input field to like this
and in my controller, on top
$scope.data = {};
and after success callback
$scope.data.newtodo = "";
I'm trying to do so, when I click on the send button a popup appears, where if the person enters the correct message it goes to the next screen if not it stays on the screen that is.
my code :
my controller.js
.controller('loginController', function($scope, $stateParams, $ionicPopup, $ionicHistory, $state) {
$scope.Enviar = function(){
var confirmPopup = $ionicPopup.prompt({
title: 'Login',
template: 'Pergunta: Digite a P∴S∴ do AP∴?',
inputType: 'text',
inputPlaceholder: 'Digite a senha',
ng-model="login"
});
confirmPopup.then(function(res) {
if(res) {
$state.go('app.home');
} else {
console.log('teste');
$state.go('login');
}
})
}
})
my login.html
<ion-view view-title="login">
<ion-content class="login-principal" scroll="true">
<div class="login-imagem">
<img class="full-image" ng-src="img/GOMB.jpg">
</div>
<div>
<ion-list class="list-inset">
<ion-item class="item-input">
<i class="icon ion-ios-email-outline placeholder-icon"></i>
<input type="text" placeholder="E-mail">
</ion-item>
<ion-item class="item-input">
<i class="icon ion-ios-locked-outline placeholder-icon"></i>
<input type="text" placeholder="Senha">
</ion-item>
</ion-list>
<div class="row login">
<div class = "col col-50" >
<a class="button button-block button-dark" ui-sref="app.cadastroUsuario">Criar conta</a>
</div>
<div class = "col col-50" >
<a class="button button-block button-dark" ng-click="Enviar()">Entrar</a>
</div>
</div>
</div>
</ion-content>
</ion-view>
My question is how to use ng-model and ng-if with ionicPopup?
Instead of $ionicPopup.prompt you can just make use of $ionicPopup.show and in template property of its object write whatever the template you want (with ng-model & ng-if). You can also have buttons with their customizable text as well as particular action onTap (like returning model value of input fields inside popup). So, you can have following function to call popup:
$scope.showPopup = function() {
$scope.data = {}
// An elaborate, custom popup
var myPopup = $ionicPopup.show({
template: '<input type="password" ng-if="isNotConnected"
ng-model="data.wifi" placeholder="Enter Password">',
title: 'Enter Wi-Fi Password',
subTitle: 'Please use normal things',
scope: $scope,
buttons: [
{ text: 'Cancel' },
{
text: '<b>Save</b>',
type: 'button-positive',
onTap: function(e) {
if (!$scope.data.wifi) {
//don't allow the user to close unless he enters wifi password
e.preventDefault();
} else {
return $scope.data.wifi;
}
}
},
]
});
myPopup.then(function(res) {
console.log('Tapped!', res);
});
};
Check out this codepen: https://codepen.io/anon/pen/wqwzPE
$scope.Enviar = function(){
var obj = new String("boa");
$ionicHistory.nextViewOptions({
disableBack : true
})
var confirmPopup = $ionicPopup.prompt({
title: 'Login',
template: 'Pergunta: Digite a?',
inputType: 'text',
inputPlaceholder: 'Digite em minusculo'
});
confirmPopup.then(function(res) {
if(res == obj) {
$state.go('app.home');
console.log(res);
} else {
//console.log('teste');
$state.go('login');
//console.log(res);
}
})
}
I have the following code which displays a static JSON object in a grid.
var app = angular.module('app', ['ui.bootstrap']);
app.controller('ModalInstanceCtrl', function($scope, $modalInstance, customer) {
$scope.customer = customer;
});
app.controller('CustomerController', function($scope, $timeout, $modal, $log) {
$scope.customers = [{
name: 'Movie Title 1',
details: 'http://image.tmdb.org/t/p/w342//lFSSLTlFozwpaGlO31OoUeirBgQ.jpg',
}, {
name: 'Movie Title 2',
details: 'http://image.tmdb.org/t/p/w342//tgfRDJs5PFW20Aoh1orEzuxW8cN.jpg',
}, {
name: 'Movie Title 3',
details: 'http://image.tmdb.org/t/p/w342//wJXku1YhMKeuzYNEHux7XtaYPsE.jpg',
}];
// MODAL WINDOW
$scope.open = function(_customer) {
var modalInstance = $modal.open({
controller: "ModalInstanceCtrl",
templateUrl: 'myModalContent.html',
resolve: {
customer: function() {
return _customer;
}
}
});
};
});
I need to be able to use this RESTful API source:
$http.get("http://api.themoviedb.org/3/movie/now_playing?api_key=ebea8cfca72fdff8d2624ad7bbf78e4c")
.success(function(response) {
console.log(response);
$scope.results = response.results;
});
and enable the click event to trigger the modal as it does now, except it needs to grab the details of each of the items in the JSON object and display in the modal.
The ng-repeat:
<div class="container">
<div class="row">
<div ng-repeat="items in results">
<img class="col-lg-3 col-md-3 col-sm-3 col-xs-12 thumbnail" ng-src="http://image.tmdb.org/t/p/w342/{{items.poster_path}}">
</div>
</div>
</div>
Using this fiddle: http://jsfiddle.net/8s9ss/224/ as a base, I need to have the buttons replaced by the images coming through the REST API and they should trigger a modal on click.
This should be all you need
<div ng-repeat="items in results">
<a ng-click="open(items)" class="col-lg-3 col-md-3 col-sm-3 col-xs-12 thumbnail">
<img ng-if="items.poster_path" ng-src="http://image.tmdb.org/t/p/w342/{{items.poster_path}}">
<div class="caption" ng-hide="items.poster_path">
<h3>{{items.title}}</h3>
</div>
</a>
</div>
You'll need to tweak your modal template to show the different properties but you should be able to figure it out.
http://jsfiddle.net/8s9ss/229/
<ion-list>
<ion-item>
<div id="result_1" class="result">
<p class="title" ng-repeat="item in result | filter: query">
<span class="ic"><b>{{item.name}}</b></span>
Click for details...
</p>
<div class="clear"></div>
</div>
</ion-item>
</ion-list>
this is a part of my first Ionic project, i'm new in this framework and AngularJs, so I have a controller which searchs for data in a json file.
I need to open a modal when user clicks on
Click for details...
but when I searched about it, I figured out that I need another controller for creating a modal.
I already have a controller in my whole page, how can I add another controller to that specific line? Or do you know any other way to create a modal without using another controller?
<ion-item>
<div id="result_1" class="result">
<p class="title" ng-repeat="item in result | filter: query">
<span class="ic"><b>{{item.name}}</b></span>
<br>
<br>
<span ng-click="popUp()" class="ic1">Click for details...</span>
</p>
<div class="clear"></div>
</div>
</ion-item>
script:
using $ionicPopup
$scope.popUp = function() {
var alertPopup = $ionicPopup.alert({
title: 'More Details...',
template: 'decription', // templateUrl:'myModalContent.html'
buttons: [{
text: '<b>OK</b>',
type: 'button-assertive'
}]
});
};
check this link for Details
using Ui bootstrap
$scope.popUp = function() {
var modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html'
resolve: {
data: function() {
return $scope.data;
}
}
});
}
There are many options you can pass. You can give a controller for your pop up too.
check this link for ui.bootstrap.modal
I try to do TODO list using Angular.js
I have function addTask, but it dosen't work. I try to give it project and than get array of tasks. In Chrome I see this mistake "Cannot read property 'tasks' of undefined"
This is my app.js
var app = angular.module('toDoList', ['ngDialog']);
app.controller('MainCtrl', [
'$scope',
'$rootScope',
'ngDialog',
function($scope, $rootScope, ngDialog){
$scope.test = 'Hello world!';
$scope.projects = [
{id: '1', title: 'For Home', tasks: [ {title: 'task 1', done:false }, {title: 'task 2', done: false }]},
{id: '2', title: 'For Work', tasks: [ {title: 'task 1', done:false }, {title: 'task 2', done: false }]}
];
$scope.addProject = function(){
if(!$scope.title || $scope.title === '') { return; }
$scope.projects.push({
title: $scope.title
});
};
$scope.addTask = function(project){
$scope.project.tasks.push({
title: $scope.tasktitle, done: false
});
}]);
This is my html code
<body ng-app="toDoList" ng-controller="MainCtrl">
<div class="project" ng-repeat="project in projects">
<span class="title">{{project.title}}</span>
<form name="frm" ng-submit="addTask(project)">
<input
type="text"
class="form-control"
placeholder="Start to type task"
ng-model="tasktitle">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">Add Task</button>
</span>
</form>
<ul class="todo-list">
<li ng-repeat="task in project.tasks">
<input type="checkbox" ng-model="task.done">
<span ng-class="{done:task.done}">{{task.title}}</span>
</li>
</ul>
</div>
</body>
How can I push my data about task?
This is doesn't work:
$scope.addTask = function(project){
$scope.project.tasks.push({
title: $scope.tasktitle, done: false
});
};
First and foremost, you're missing an 's' in $scope.project.tasks.push. It should be projects, so as to match up with the scope variable.
Second, you're not actually choosing a project to push to. $scope.projects is an Array. You would need to choose an index to push to. Here's what I think you're going for:
HTML
<form name="frm" ng-submit="addTask(project.id, tasktitle)">
Javascript
$scope.addTask = function(id, task){
$scope.projects[id].tasks.push({
title: task
, done: false
});
};
EDIT: Working codepen at: codepen.io/Pangolin-/pen/YPVwye – Pangolin
I could fix this, but i don't know is it right?
HTML
<form name="frm" ng-submit="addTask(project.tasks, tasktitle)" class="input-group">
Javascript
$scope.addTask = function(project, value){
project.push({
title: value
});