I am trying to grab the buttons html with .html() and insert into $scope.player. The button is calling the choosePlayer() function with ng-click but it is not working.
Here's the codepen link: http://codepen.io/theMugician/pen/ojJrRp
HTML
<body ng-app="ticTacToe" ng-controller="MainCtrl">
<div class="container">
<div class="row">
<div class="col-xs-12 text-center">
<h1>TIC TAC TOE</h1>
</div>
</div>
</div>
<div id="wrapper" class="container text-center">
<div class="row">
<div ng-click="move(cell)" ng-repeat="cell in cells" class="col-xs-4 square text-center">
{{cell.value}}
</div>
</div>
</div>
<div class="container">
<div class="row text-center">
<h1>CHOOSE A SHAPE</h1>
<button ng-click="choosePlayer()" class="btn btn-red" id="choose-cross">✖</button>
<button ng-click="choosePlayer()" class="btn btn-green" id="choose-circle">◯</button>
</div>
</div>
</body>
JAVASCRIPT
var app = angular.module("ticTacToe", []);
app.controller("MainCtrl", function($scope){
var cell = $(".square");
$scope.player = "";
var cross = "×";
var circle = "◯";
$scope.choosePlayer = function(){
$scope.player = $(this).html();
}
$scope.cells = [ { value: '' }, { value: '' }, { value: '' },
{ value: '' }, { value: '' }, { value: '' } ,
{ value: '' }, { value: '' }, { value: '' }
];
$scope.move = function(cell){
cell.value = $scope.player;
};
});
You could pass the $event object in the ng-click() directive:
<button ng-click="choosePlayer($event)" class="btn btn-red" id="choose-cross">✖</button>
<button ng-click="choosePlayer($event)" class="btn btn-green" id="choose-circle">◯</button>
And then access event.currentTarget to get the element in your controller:
Updated Example
Without jQuery:
$scope.choosePlayer = function(e) {
$scope.player = e.currentTarget.innerText;
}
With jQuery:
$scope.choosePlayer = function(e) {
$scope.player = $(e.currentTarget).text();
}
Related
I cant work with cookies well in vue.js. I want to show data on another page in history.
How can I save data from my calculator with cookies in vue.js ?
Code :
<template>
<html>
<body>
<div id="app">
<div class="container">
<div class="calculator">
<div class="answer">{{ answer }}</div>
<div class="display">{{ logList + current }}</div>
<div #click="clear" id="clear" class="btn operator">C</div>
<div #click="sign" id="sign" class="btn operator">+/-</div>
<div #click="percent" id="percent" class="btn operator">
%
</div>
<div #click="divide" id="divide" class="btn operator">
/
</div>
<div #click="append('7')" id="n7" class="btn">7</div>
<div #click="append('8')" id="n8" class="btn">8</div>
<div #click="append('9')" id="n9" class="btn">9</div>
<div #click="times" id="times" class="btn operator">*</div>
<div #click="append('4')" id="n4" class="btn">4</div>
<div #click="append('5')" id="n5" class="btn">5</div>
<div #click="append('6')" id="n6" class="btn">6</div>
<div #click="minus" id="minus" class="btn operator">-</div>
<div #click="append('1')" id="n1" class="btn">1</div>
<div #click="append('2')" id="n2" class="btn">2</div>
<div #click="append('3')" id="n3" class="btn">3</div>
<div #click="plus" id="plus" class="btn operator">+</div>
<div #click="append('0')" id="n0" class="zero">0</div>
<div #click="dot" id="dot" class="btn">.</div>
<div #click="equal" id="equal" class="btn operator">=</div>
</div>
</div>
</div>
</body>
</html>
</template>
I cant work with model well in vue.js. I want to show what happened to numbers on another page in history.
This is my script :
<script>
export default {
data() {
return {
logList: '',
current: '',
answer: '',
operatorClicked: true,
}
},
methods: {
append(number) {
if (this.operatorClicked) {
this.current = ''
this.operatorClicked = false
}
this.current = `${this.current}${number}`
},
addtoLog(operator) {
if (this.operatorClicked == false) {
this.logList += `${this.current} ${operator} `
this.current = ''
this.operatorClicked = true
}
},
clear() {
this.current = ''
this.answer = ''
this.logList = ''
this.operatorClicked = false
},
sign() {
if (this.current != '') {
this.current =
this.current.charAt(0) === '-'
? this.current.slice(1)
: `-${this.current}`
}
},
percent() {
if (this.current != '') {
this.current = `${parseFloat(this.current) / 100}`
}
},
dot() {
if (this.current.indexOf('.') === -1) {
this.append('.')
}
},
divide() {
this.addtoLog('/')
},
times() {
this.addtoLog('*')
},
minus() {
this.addtoLog('-')
},
plus() {
this.addtoLog('+')
},
equal() {
if (this.operatorClicked == false) {
this.answer = eval(this.logList + this.current)
} else {
this.answer = 'wrong!'
}
},
},
}
</script>
mounted() {
if (localStorage.data) {
this.data = JSON.parse(localStorage.data);
}
},
watch: {
data(newData) {
localStorage.data = newData;
}
}
You could do something like this to save your data in local storage, and then load it on a page refresh. Or you can move the watcher into method and have it be triggered by "save" button.
Below are some snippets of my code. Basically I have a few sections in my code to show some data and all these sections are collapsible. First load all sections expanded. On click on the chevron arrow, div -'ibox-content' will be collapsed.
How do I target only the nearest ibox to collapse? At moment when one arrow is clicked all sections are collapsed.
var vue = new Vue({
el: '#vue-systemActivity',
data: {
loading: false,
collapsed: false,
dateStart: '',
dateEnd: '',
status: 'fail',
msg: '',
meta: '',
data: ''
},
created: function() {
this.fetchData();
},
ready: function() {
this.fetchData();
},
methods: {
fetchData: function() {
var self = this;
if (self.dateStart != '' && self.dateEnd != '') {
this.loading = true;
$.get(baseUrl + '/backend/getSystemActFeed?dateStart=' + self.dateStart + '&dateEnd=' + self.dateEnd, function(json) {
self.data = json.data;
self.status = json.status;
self.meta = json.meta;
self.msg = json.msg;
}).always(function() {
self.loading = false;
});
}
}
}
});
");
<div v-if="data.events">
<div class="ibox float-e-margins" :class="[collapsed ? 'border-bottom' : '']">
<div class="ibox-title">
<h5>Events</h5>
<div class="ibox-tools">
<a v-on:click=" collapsed = !collapsed" class="collapse-link">
<i :class="[collapsed ? 'fa-chevron-up' : 'fa-chevron-down', 'fa']"></i>
</a>
</div>
</div>
<div v-for="event in data.events" class="ibox-content inspinia-timeline" v-bind:class="{'is-collapsed' : collapsed }">
<div class="timeline-item">
<div class="row">
<div class="col-xs-3 date">
<i class="fa fa-calendar"></i> {{event.fDateStarted}}
<br/>
</div>
<div class="col-xs-7 content no-top-border">
<!-- <p class="m-b-xs"><strong>Meeting</strong></p> -->
<b>{{event.title}}</b> started on {{event.fDateStarted}} at {{event.at}}
</div>
</div>
</div>
</div>
</div>
</div>
<div v-if="data.mentorBookings">
<div class="ibox float-e-margins" :class="[collapsed ? 'border-bottom' : '']">
<div class="ibox-title">
<h5>Mentorship</h5>
<div class="ibox-tools">
<a v-on:click=" collapsed = !collapsed" class="collapse-link">
<i :class="[collapsed ? 'fa-chevron-up' : 'fa-chevron-down', 'fa']"></i>
</a>
</div>
</div>
<div v-for="mentorProgram in data.mentorBookings" class="ibox-content inspinia-timeline">
<div class="timeline-item">
<p class="m-b-xs"><strong>{{mentorProgram.programName}}</strong></p>
<div v-for="upcomingBooking in mentorProgram.upcomingBookings">
<div class="row">
<div class="col-xs-3 date">
<i class="fa fa-users"></i> {{upcomingBooking.fBookingTime}}
<br/>
</div>
<div class="col-xs-7 content no-top-border">
#{{upcomingBooking.id}} {{upcomingBooking.mentor.firstname}} {{upcomingBooking.mentor.lastname}} ({{upcomingBooking.mentor.email}}) mentoring {{upcomingBooking.mentee.firstname}} {{upcomingBooking.mentee.lastname}} ({{upcomingBooking.mentee.email}}) on
{{upcomingBooking.fBookingTime}} thru {{upcomingBooking.sessionMethod}}
<!--
<p><span data-diameter="40" class="updating-chart">5,3,9,6,5,9,7,3,5,2,5,3,9,6,5,9,4,7,3,2,9,8,7,4,5,1,2,9,5,4,7,2,7,7,3,5,2</span></p> -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Each div should have each own collapsed state for control. You can turn collapsed into an array/object to control them.
simple example: https://codepen.io/jacobgoh101/pen/QQYaZv?editors=1010
<div id="app">
<div v-for="(data,i) in dataArr">
{{data}}<button #click="toggleCollapsed(i)">toggle me</button>
<span v-if="collapsed[i]">this row is collapsed</span>
<br/>
<br/>
</div>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
dataArr: ["data0", "data1", "data2"],
collapsed: [false, false, false]
},
methods: {
toggleCollapsed: function(i) {
this.$set(this.collapsed, i, !this.collapsed[i]);
}
}
});
</script>
I have the following Javascript that I am using to make a sort of flowchart where the user clicks through a set of questions. For certain responses i want to link to an external site where more info can be found. How do I add these links?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="wrapper">
<div class="container">
<div class="row">
<div class="col-xs-12 text-right">
<button class="btn btn-default btn-corner" type="submit" data-bind="click: startOver, visible: queryData().id > 0">Start over</button>
</div>
</div>
</div>
<div class="container main">
<div class="row">
<div class="c12 text-center">
<h1 data-bind="text: queryData().text"></h1>
<h3 data-bind="text: queryData().subhead"></h3>
<div class="option-group" data-bind="foreach: queryData().answers">
<button class="btn btn-default btn-lg" type="submit" data-bind="click: $parent.goToTarget, text: text"></button>
</div>
<button class="btn btn-default" type="submit" data-bind="click: stepBack, visible: navHistory().length > 1">Previous Step</button>
</div>
</div>
</div>
<div class="push"></div>
</div>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.3.0.js"></script>
<script src="app.js?v=0.4.0"></script>
<script>
</script>
</body>
</html>
The Javascript is as follows:
JS
var queries = [{
id: 0,
text: "Where to start?",
answers: [{
text: "Let's Begin!",
target: 1
}]
}, {
id: 1,
text: "Which genre do you want to start in?",
answers: [{
text: "Fantasy",
target: 100
}, {
text: "SciFi",
target: 2
}, {
text: "Neither",
target: 59
}]
}, {
id: 2,
text: "It's huge but it's worth it. The Cryptonomicon by Neal Stephenson",
answers: [{
text: "Amazon.co.uk",
target: "_blank"
}, {
text: "Amazon.com"
}]
}];
function QueryViewModel() {
var self = this;
self.querySet = ko.observable();
self.currentStep = ko.observable();
self.queryData = ko.observable();
self.sfw = ko.observable();
self.navHistory = ko.observableArray();
// Operations
self.goToTarget = function(obj) {
self.navHistory.push(self.currentStep());
self.currentStep(obj.target);
self.queryData(self.querySet()[obj.target]);
}
self.startOver = function() {
self.navHistory.removeAll();
self.goToTarget({target: 0});
}
self.stepBack = function() {
var lastStep = self.navHistory().length > 1 ? self.navHistory.pop() : 0;
self.currentStep(lastStep);
self.queryData(self.querySet()[lastStep]);
}
var paramsString = document.location.hash.substring(1);
var params = new Array();
if (paramsString) {
var paramValues = paramsString.split("&");
for (var i = 0; i < paramValues.length; i++) {
var paramValue = paramValues[i].split("=");
params[paramValue[0]] = paramValue[1];
}
}
params ? paramTarget = params['target'] : params = [];
self.sfw() ? self.querySet(queriesSFW) : self.querySet(queries);
if (paramTarget) {
self.navHistory.push(0);
self.currentStep(0);
self.goToTarget({target: paramTarget})
} else {
self.goToTarget({target: 0});
}
}
ko.applyBindings(new QueryViewModel());
In html you can do something like this:
<button type="button" onclick="window.open('https://google.com/', '_self')">Button</button>
You don't have to use a button, different elements can use onclick like text or images. This can also call js functions, just put the function name where "window.open..." is.
Of course the standard way to do it is
<a href='https://www.google.com/'>Link</a>
You can practice using js here: http://www.w3schools.com/js/tryit.asp?filename=tryjs_intro_inner_html
and learn more about it here: http://www.w3schools.com/js/js_intro.asp
I am not sure why you would show us the JSON for open a link to another page. Unless I misunderstood. This kind of basic information can be found by a quick Google search.
Add your link in the object like:
text: "Fantasy",
link: "http://www.stackoverflow.com",
target: 2
Now when you need to go to that link, use this function:
var link = obj.link;
window.open(link, "_blank");
So I am developing this app in which i want to apply pagination to list of templates.
template objects are stored in the list.
I am displaying thumbnails of templates on the page and I want to apply pagination for this page.
So far I have tried following solution but it didn't work.
It displaying the pagination correctly but when I click on the link its not updating the contents of the page.
list.html
<div class="container">
<div class="homepage-header">
<h2 class="homepage-title text-center wow fadeInDown animated" style="visibility: visible; animation-name: fadeInDown; -webkit-animation-name: fadeInDown;"> TEMPLATES </h2>
</div>
<div class="row">
<div class="col-md-6 col-sm-6" style="text-align: left">
<div class="form-inline">
<div class="form-group has-feedback has-clear">
<input type="text" class="form-control" ng-model="searchParam" ng-model-options="{ debounce: 400 }" placeholder="Search template ..."
/>
<a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" ng-click="searchParam = '';
retreivePageData(0);" ng-show="searchParam" style="pointer-events: auto; "></a>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6" style="text-align: right; vertical-align: middle; padding-right: 30px;">
<div class="form-inline">
{{selectedOption}}
<i class="fa fa-toggle-on fa-2x active" ng-if="status == true" ng-click="changeStatus();" title="Show component based templates"></i>
<i class="fa fa-toggle-on fa-2x fa-rotate-180 inactive" ng-if="status == false" ng-click="changeStatus();" title="Show image based templates"></i>
<button ng-click="newTemplateConfig()" class="btn btn-primary btn-xs" title="Add new template"><i class="fa fa-plus-circle fa-fw"></i>New Template</button>
</div>
</div>
</div>
<div class="homepage-ui-showcase-2-css row wow zoomIn animated" style="height: 402px;padding: 5px 0px; visibility: visible; animation-name: zoomIn; -webkit-animation-name: zoomIn;">
<div ng-repeat="(templateIndex, templateModel) in templatesList | filter:searchParam | limitTo: itemsPerPage">
<div class="active col-md-3 col-lg-3 col-sm-6 col-xs-12 mix design painting" style="display: inline-block;padding-top: 10px;"
ng-init="visible=false" ng-mouseover="visible=true" ng-mouseleave="visible=false">
<div class="portfolio-item shadow-effect-1 boxShadow" style="max-width: 250px;padding:0.3px;border:2px dotted #bebede;cursor: pointer">
<div class="mainBadge">
<kbd>{{templateModel.badge}}</kbd>
</div>
<div ng-switch on="{{templateModel.type !== undefined && templateModel.type === 'Annotate'}}">
<div ng-switch-when="false" style="height: 130px;" ui-sref="/designer/:pageId({pageId:templateModel.id})" class="portfolio-img ">
<i style="opacity:0.4;padding-top:35px;padding-left:15px;margin-left: 30%;" class="fa fa-puzzle-piece fa-4x"></i>
</div>
<div ng-switch-when="true" style="height: 130px;" ui-sref="annotator/:annotatedTemplateId({annotatedTemplateId:templateModel.id})"
class="portfolio-img ">
<i style="opacity:0.4;padding-top:35px;padding-left:15px;margin-left: 30%;" class="fa fa-file-image-o fa-4x"></i>
</div>
</div>
<div class="portfolio-item-content" title="{{templateModel.name}}">
<h3 class="header" style="font-size: 13px;text-align: center;display:inline;">
{{templateModel.name}}
</h3>
<small class="pull-right" ng-show="visible" style="display: inline; padding-top: 4px">
<div ng-switch on="{{templateModel.type !== undefined && templateModel.type === 'Annotate'}}">
<div ng-switch-when="true" href="#" class="btn btn-xs btn-danger" title="Generate Communication"
ui-sref="generateCommunication({mode:'A',id: templateModel.id})"
ng-disabled="!templateModel.dynamic_entity"> <!--style="color:#9d9d9;"-->
<i class="fa fa-file-pdf-o"></i>
</div>
<div ng-switch-when="false" href="#" class="btn btn-xs btn-danger" title="Generate Communication"
ui-sref="generateCommunication({mode:'T',id: templateModel.id})"
ng-disabled="!templateModel.dynamic_entity"> <!--style="color:#9d9d9;"-->
<i class="fa fa-file-pdf-o"></i>
</div>
</div>
</small>
</div>
</div>
</div>
</div>
</div>
<div class="row " style="margin-top: 10px; padding-top:0px;">
<div class="pagination-div pull-right" style="">
<!--<pagination class="pull-right" total-items="templatesList.length" ng-model="currentPage" max-size="maxSize" items-per-page="itemsPerPage"></pagination> -->
<uib-pagination total-items="templatesList.length" ng-model="currentPage" ng-change="pageChanged()" max-size="maxSize" class="pagination-sm" items-per-page="itemsPerPage" boundary-link-numbers="true"></uib-pagination>
</div>
</div>
</div>
list.controller.js
'use strict';
angular.module('rapid').controller('HomeListController',
function($scope, $rootScope, $window, $modal, ServiceFactory, toaster, ReadFileService, AnnotationService, AnnotateService, DocumentService) {
$scope.templatesList = [];
$scope.selectedOption = 'All';
$scope.annotateTemplateMeta = [];
$scope.rapidTemplateMeta = [];
$scope.maxSize = 5;
$scope.init = function() {
$scope.status = true;
$scope.selectedOption = "Image Based";
$scope.retrieveTemplates($scope.status);
$scope.currentPage = 1;
};
$scope.changeStatus = function(){
$scope.status = !$scope.status;
$scope.retrieveTemplates($scope.status);
};
$scope.retrieveTemplates = function(selectedOption) {
$scope.templatesList = [];
if(selectedOption) {
$scope.selectedOption = "Image Based";
$scope.fetchAnnotationTemplates("Annotate");
} else {
$scope.selectedOption = "Component Based";
$scope.fetchRapidTemplates("Rapid");
}
};
$scope.fetchAnnotationTemplates = function(selectedOption) {
AnnotateService.get().$promise.then(function(result) {
$scope.annotateTemplateMeta = result[0];
console.log('Annotated template count :: ' + result[0].length);
if (selectedOption === 'All') {
$scope.fetchRapidTemplates(selectedOption);
} else {
$scope.prepareTemplateList(selectedOption);
}
});
};
$scope.fetchRapidTemplates = function(selectedOption) {
ServiceFactory.PagesService.getAllPages().$promise.then(function(result) {
$scope.rapidTemplateMeta = result[0];
console.log('Rapid template count :: ' + result[0].length);
$scope.prepareTemplateList(selectedOption);
});
};
$scope.prepareTemplateList = function(selectedOption) {
$scope.itemsPerPage = 1;
var getPaginatedTemplateList = 'getList';
$scope.currentPage = 0;
if (selectedOption === 'Annotate') {
$scope.annotateTemplateMeta.forEach(function(annotate) {
var templateObject = {};
templateObject = { id: annotate.id, name: annotate.name, type: "Annotate", dynamic_entity:annotate.dynamic_entity, badge:"Image Based" };
$scope.templatesList.push(templateObject);
});
} else if (selectedOption === 'Rapid') {
$scope.rapidTemplateMeta.forEach(function(rapidTemplate) {
var templateObject = {};
templateObject = { id: rapidTemplate._id, name: rapidTemplate.name, type: "Component", dynamic_entity:rapidTemplate.pageObj.entity, badge:"Component Based" };
$scope.templatesList.push(templateObject);
});
//alert('Rapid count '+selectedOption + $rootScope.rapidTemplateMeta.length);
} else {
$scope.annotateTemplateMeta.forEach(function(annotate) {
var templateObject = {};
templateObject = { id: annotate.id, name: annotate.name, type: "Annotate", dynamic_entity:annotate.dynamic_entity, badge:"Image Based" };
$scope.templatesList.push(templateObject);
});
$scope.rapidTemplateMeta.forEach(function(rapidTemplate) {
var templateObject = {};
templateObject = { id: rapidTemplate._id, name: rapidTemplate.name, type: "Component", dynamic_entity:rapidTemplate.pageObj.entity, badge:"Component Based" };
$scope.templatesList.push(templateObject);
});
$scope.totalItems = $scope.templatesList.length;
$scope.maxSize = 5;
}
//$scope.retreivePageData(0);
};
$scope.setPage = function(pageNo) {
$scope.currentPage = pageNo;
};
$scope.pageChanged = function() {
alert('Page changed to: ' + $scope.currentPage);
});
};
$scope.newTemplateConfig = function (size) {
var modalInstance = $modal.open({
backdrop: 'static',
keyboard: false,
animation: $scope.animationsEnabled,
templateUrl: 'scripts/app/home/modal/template.modal.html',
controller: 'TemplateModalCtrl',
size: size,
resolve: {templateModel: function () {
return null;
},
title: function () {
return 'Create New Template';
},
templateType: function() {
if($scope.status) {
return 'Annotate';
} else {
return 'Rapid'
}
}
}
});
modalInstance.result.then(function (saveAnnotatedTemplateConfig) {
alert('modal result')
//$scope.saveAnnotatedTemplateConfig(saveAnnotatedTemplateConfig.templateConfigModel);
}, function () {
console.log('Modal dismissed at: ' + new Date());
});
};
$scope.init();
});
Is there anything wrong with my code?
Please provide some inputs on this.
You can use ui-grid directive to solve your pagination problem.
Please refer to the ui-grid API.
Checkout these 2 plunkers :
Plunker 1
Plunker 2
Ive tried to use this with the current view scope and also by adding its own controller. No success in clearing all fields on cancel button click. All I need is to clear the fields.
Here is my in my controller modal :
var myApp = angular.module('starter.controllers');
function TalkSearchPageCtrl($scope, TalkSearch, $ionicModal) {
var nextPageNum = 1;
$scope.noMoreItemsAvailable = false;
var nextPageNum = 1;
$scope.loadMore = function() {
TalkSearch.getList(nextPageNum, {
}, $scope.idsToExclude, $scope.backResult).success(function(items) {
if (typeof(items.idsToExclude) !== undefined) {
$scope.idsToExclude = items.idsToExclude;
$scope.backResult = true;
} else {
$scope.idsToExclude = undefined;
$scope.backResult = undefined;
}
// error check when it's not loading
if (items.talks.length != 0) {
i = 0;
while (i != items.talks.length - 1) {
$scope.talks.push(items.talks[i]);
i++;
}
nextPageNum++;
} else {
$scope.noMoreItemsAvailable = true;
}
$scope.$broadcast('scroll.infiniteScrollComplete');
});
};
$scope.talks = [];
$scope.categories = [
];
$scope.checkedCategories = [];
$scope.toggleCheck = function(category) {
if ($scope.checkedCategories.indexOf(category) === -1) {
$scope.checkedCategories.push(category);
} else {
$scope.checkedCategories.splice($scope.checkedCategories.indexOf(category), 1);
}
};
$scope.getValues = function(filter) {
console.log(filter);
if (filter.length || filter !== undefined) {
$scope.userFilter = {};
$scope.userFilter.categories = [];
$scope.userFilter.filters = {};
$scope.userFilter.filters = angular.copy(filter);
var categories = $scope.checkedCategories;
$scope.userFilter.categories = categories;
getFiltersService.filter = angular.copy(filter);
console.log($scope.userFilter);
// console.log(getFiltersService.filter);
}
};
$scope.reset = function() {
console.log($scope.userFilter);
// $scope.modal.hide();
// $scope.userFilter.filters = null;
// $scope.userFilter.categories = null;
// $scope.userFilter = {};
console.log($scope.userFilter);
};
$ionicModal.fromTemplateUrl('my-modal.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
});
}
myApp.controller('TalkSearchPageCtrl', ['$scope', 'TalkSearch', '$ionicModal', TalkSearchPageCtrl]);
$ionicModal.fromTemplateUrl('my-modal.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
});
Here is my html script template :
<script id="my-modal.html" type="text/ng-template">
<ion-modal-view>
<ion-header-bar class="bar bar-header schoolinkscolor headerSection" ng-controller="TalkFilterPageCtrl">
<div class="row padding0">
<div class="col">
<div class="button button-white closeModal" side="right" ng-click="reset(talkfilter);hideButton=false;showDetails=false;"><span>Cancel</span></div>
</div>
<div class="col">
<div class="light headerTitle"><span class="light">Schoo</span><span class="color-black">Links</span></div>
</div>
<div class="col">
<div class="button button-white searchButton" side="left"><span>Search</span></div>
</div>
</div>
</ion-header-bar>
<ion-content class="has-header">
<div class="talkFilterContainer">
<section>
<div class="col padding0">
<div class="list list-inset">
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" placeholder="Search" ng-model="talkfilter.searchTalk" ng-change="getValues(talkfilter)" ng-model-options="{ debounce: 1000 }">
</label>
</div>
</div>
</section>
<div class="row padding clearboth"></div>
<section>
<div class="list padding">
<label class="item item-input item-select">
<div class="input-label">
Language:
</div>
<select ng-options="author for author in ['Mandarin','Spanish','Portuguese']" ng-model="talkfilter.selectLanguage" ng-init="author = 'Select Preferred Language'" ng-change="getValues(talkfilter)">
<option value="">Select Preferred Language</option>
</select>
</label>
</div>
</section>
<div class="row padding clearboth"></div>
<section>
<div class="list padding">
<label class="item item-input item-select">
<div class="input-label">
Author Type:
</div>
<select ng-options="author for author in ['Consultant','School','Student']" ng-model="talkfilter.authorType" ng-init="author = 'Select By Author Type'" ng-change="getValues(talkfilter)">
<option value="">Select By Author Type</option>
</select>
</label>
</div>
</section>
<div class="row padding clearboth"></div>
<section class="padding">
<ion-list>
<ion-item ng-repeat="category in categories track by $index" ng-class="{ 'hidden': ! showDetails && $index > 2}">
<ion-checkbox value="{{category}}" ng-model="$index" ng-click="toggleCheck(category); getValues(talkfilter)">{{category}}</ion-checkbox>
</ion-item>
</ion-list>
<div class="row">
<button class="button button-full button-clear" ng-click="showDetails = ! showDetails;hideButton=true" ng-show="!hideButton">See All Categories</button>
</div>
</section>
</div>
</ion-content>
</ion-modal-view>
Here is my reset function:
var Talk = this;
Talk.reset = function(filter) {
console.log(filter);
filter = null;
};
Also tried with $scope :
$scope.reset = function(filter) {
console.log(filter);
filter = null;
};
***Update:
$scope.reset = function(filter) {
$scope.userFilter = null; //does not work. none of these variations work.
$scope.userFilter = '';
};
Both of these methods return undefined. But if i put the button in the body it clears the fields. I need the button in the header.
Also tried inlining the reset with:
<button ng-click="talkfilter=null"></button>
The problem is that you are not passing anything in the filter function with the ng-click, because your $scope.userfilter is not defined throughout the controller.
Adding $scope.userFilter = {} like you have done inside of getValues, outside of that function should give you the desired result if you do your reset function like so....
function TalkSearchPageCtrl($scope, TalkSearch, $ionicModal) {
$scope.userFilter = {};
...
$scope.reset = function(filter) {
console.log(filter); \\Make sure this is the object
$scope.userFilter = null; \\Set it to null or {}
}`