Ionic Modal: clear all fields on click/cancel - javascript

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 {}
}`

Related

Angular js toggle event is not working correctly

My toggle works fine but when I click the button again it will not reset all. The tab which is open will stay open or close (if it's close). It is behaving like it doesn't want to reset to its original form. Can someone suggest me what I am doing wrong, please
<md-card>
<md-card-content>
<button ng-click="Custom()">Cick Here</button>
<div>
<div ng-repeat="search in vm.searchResults">
<md-card ng-click="callaction=!callaction">
<md-card-content>
<br />
<div ng-repeat="sponsor in search.scp">
<div ng-repeat="cin in sponsor.ci">
<div ng-repeat="po in cin.po" >
<p></p>
<span> {{sponsor.Name }}</span>
<span ng-repeat="prod in po.prods">
<img ng-src="{{img/cc2.ico}}">
</span>
<md-list>
<md-list-item ng-hide="callaction">
<div class="outside">
<div ng-repeat="delivery in po.deliveryAddresses" class='extra divInner'>
{{delivery.PracticeName}} <br /> <span ng-show="delivery.LineTwo">{{ delivery.LineTwo}}
</div>
</div>
</md-list-item>
</md-list>
</div>
</div>
</div>
</md-card-content>
</md-card>
</div>
</div>
</md-card-content>
</md-card>
Javascript
$scope.callaction = true;
$scope.Custom = function () {
$scope.callaction = !$scope.callaction;
};
As you can see running the code snippet,
angular works fine...
function TestCtrl($scope, cards) {
var vm = $scope;
vm.cards = cards;
vm.collapseCard = function(card) {
card.callaction = false;
};
vm.expandCard = function(card) {
card.callaction = true;
};
vm.Custom = function(event, card) {
card.callaction
? vm.collapseCard(card)
: vm.expandCard(card)
;
};
vm.collapseAll = function(event) {
vm.cards.forEach(vm.collapseCard);
};
vm.expandAll = function(event) {
vm.cards.forEach(vm.expandCard);
};
vm.toggleAll = function(event) {
vm.cards.forEach(function(card) {
vm.Custom(event, card);
});
};
vm.checkboxStyleBehaviour = function(event) {
var someCollapsed = vm.cards.some(
function(card) { return card.callaction === false; }
);
if(/* there are */ someCollapsed /* cards left */) {
return vm.expandAll();
}
return vm.collapseAll();
};
}
angular
.module('test', [])
.controller('TestCtrl', TestCtrl)
.constant('cards', Array.from({length: 20},
(_, i) => ({id: ++i, callaction: true})
))
;
.toggle-disabled {
visibility: hidden;
}
button {
margin-right: 5px;
}
.cbox {
background: lightcoral;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<section ng-app="test">
<div ng-controller="TestCtrl">
<button ng-click="expandAll($event)">Expand All Cards</button>
<button ng-click="collapseAll($event)">Collapse All Cards</button>
<button ng-click="toggleAll($event)">Toggle All Cards</button>
<button ng-click="checkboxStyleBehaviour($event)" class="cbox">Checkbox Style?</button>
<hr />
<hr />
<div ng-repeat="card in cards track by $index">
<button ng-click="Custom($event, card)">Toggle</button> <strong ng-class="{false: 'toggle-disabled'}[card.callaction]">
{{card.id}} - I Am Active
</strong>
<hr />
</div>
</div>
</section>

How update list in AngularJS?

I created one TODO List in AngularJS but I didn't finish the update function. I have some difficulty.
How do I create the update function?
Link: https://plnkr.co/edit/XfWoGVrEBqSl6as0JatS?p=preview
<ul class="list-todo">
<li ng-repeat="t in tasks track by $index">
<div class="row">
<div class="six columns">
<p>{{ t }}</p>
</div>
<div class="three columns">
<button class="button" ng-click="update()">update</button>
</div>
<div class="three columns">
<button class="button" ng-click="delete()">x</button>
</div>
</div>
</li>
</ul>
Angular Code:
angular.module('todoTest', [])
.controller('todoController', function($scope) {
$scope.tasks = [];
$scope.add = function() {
$scope.tasks.push($scope.dotask);
}
$scope.update = function(){
$apply.tasks.push($scope.dotask);
}
$scope.delete = function() {
$scope.tasks.splice(this.$index, 1);
}
})
If you want to update the value you have to pass as parameter the position of the task inside the tasks array ($index is the position):
<button class="button" ng-click="update($index)">update</button>
And then the update function would be:
$scope.update = function(index){
$scope.tasks[index] = $scope.dotask;
}
Is that what you needed?
Button for updating. Visible only while updating.
<div class="row">
<button type="submit" class="u-full-width button button-primary">Criar Tarefa</button>
<button ng-show="updateMode" ng-click="update()" type="button" class="u-full-width button button-primary">Update</button>
</div>
New update function.
$scope.update = function(index) {
if ($scope.updateMode) {
$scope.tasks[$scope.updateIndex] = $scope.dotask;
$scope.updateMode = false;
} else {
$scope.dotask = $scope.tasks[index];
$scope.updateMode = true;
$scope.updateIndex = index;
}
If you click update on the task it will make the big update button visible and bring the old todo to the input. After hitting the big update button the todo task will update.
Plunker

How to correct this redundancy in an array?

I'm building an app in ionic, and I need to pass items into another array, but when I pass the same item again it's considered the same item - really - but I need that to not happen. I need them to be considered different or or at least be considered different. Each item(is an object) of array have a var "qntt"(quantity) and when this bug happen, instead put the same item in array, plus one in this var. OBS: I'm using ng-repeat="item in items track by $index" in html.
<ion-view title="Order">
<ion-content overflow-scroll="true" padding="true" style="background: url(img/background1.jpg) no-repeat center;" class="has-header" ng-controller="pedidoCtrl">
<button class="button button-dark button-small button-block" ng-click="showDelete = !showDelete">Remover</button>
<ion-list show-delete="showDelete">
<ion-item class="item-thumbnail-left item-remove-animate" ng-repeat="item in items track by $index">
<ion-delete-button class="ion-minus-circled" ng-click="deleteItem(item)"></ion-delete-button>
<img src="{{item.img}}">
<h2>{{item.nome}}</h2>
<div class="row">
<div class="col col-60">
<h2>R{{item.subtotal | currency}}</h2>
</div>
<div class="col col-15">
<button class="button button-clear button-assertive button-small icon ion-minus" ng-click="subQtt(item)"></button>
</div>
<div class="col col-10">
<h2>{{item.qtt}}</h2>
</div>
<div class="col col-15">
<button class="button button-icon-right button-clear button-assertive button-small icon ion-plus" ng-click="addQtt(item)"></button>
</div>
</div>
</ion-item>
</ion-list>
<button style="text-align:right;" class="button button-assertive button-block icon-left ion-cash">R{{total | currency}}</button>
<div style="margin-right:-20px;">
<button style="left:-10px;" class="button button-dark button-large button-full icon ion-android-cart">Order</button>
</div>
</ion-content>
.controller('orderCtrl', function($scope, productService) {
$scope.items = null;
$scope.items = productService.getProducts();
$scope.deleteItem = function(item){
$scope.items.splice($scope.items.indexOf(item), 1);
};
$scope.$watchCollection('items', function(array) {
if (array) {
$scope.total = array.reduce(function(total,item) {
return total + item.subtotal;
},0);
}
$scope.addQtt = function(item){
item.qtt = item.qtt + 1;
item.subtotal = item.price * item.qtt;
$scope.total = array.reduce(function(total,item) {
return total + item.subtotal;
},0);
};
$scope.subQtt = function(item){
if(item.qtt > 1)
{
item.qtt--;
item.subtotal = item.price * item.qtt;
}
else
{
$scope.items.splice($scope.items.indexOf(item), 1);
}
$scope.total = array.reduce(function(total,item) {
return total + item.subtotal;
},0);
};
});
})
.service('productService', [function(){
var productList = [];
var addProduct = function(product) {
productList.push(product);
};
var getProducts = function(){
return productsList;
};
return {
addProduct: addProduct,
getProducts: getProducts,
};
}]);
That's because you are not calling the service method addProduto() within your controller. Try calling produtoService.addProduto() within the $scope.addQnt() method as below and it should work:
$scope.addQnt = function(item){
item.qntd = item.qntd + 1;
item.subtotal = item.preco * item.qntd;
$scope.total = array.reduce(function(total,item) {
return total + item.subtotal;
},0);
// Add this line to retain your addition in service
produtoService.addProduto(item);
// Get updated list of products
$scope.items = productoService.getProdutos();
// Alternatively use '$scope.items.push(item)'
};
Also, you need to refresh your $scope.items by triggering a call to productoService.getProdutos(), though you can do it directly by pushing in $scope.items.push(item)

Pagination is not working in AngularJS

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

angular JS and inline editing data from REST

i am very new to angular.
i am reading a JSONP response and showing it in a page. i would like to allow users to edit parts of the text inline. i found angular-xeditable. but i cant figure out
1. how do i use it in the repeater. i have spent several hours trying to use the inline edit. it works if its not in the repeater. otherwise breaks everything.
i have this:
in my app.js:
var app = angular.module('ListApp', ['ui.bootstrap']).config(['$httpProvider', function ($httpProvider)
{
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
}]);;
var app11 = angular.module("app11", ["xeditable"]);
app11.run(function (editableOptions) {
editableOptions.theme = 'bs3'; // bootstrap3 theme. Can be also 'bs2', 'default'
});
app11.controller('Ctrl', function ($scope) {
$scope.user = {
name: 'awesome user'
};
});
angular.element(document).ready(function () {
angular.bootstrap(document.getElementById('list-reminders'), ['ListApp']);
angular.bootstrap(document.getElementById('xedittxt'), ['app11']);
});
in my html:
<div id="list-reminders" class="container main-frame" ng-controller="remindersController" ng-init="init()">
<div class="search-box row-fluid form-inline">
<nobr>
<label>Find</label>
<input type="text" ng-model="searchText" value="{{searchText}}" /> <input type="submit" class="submit" ng-click="getRemindersByUserId()" value="Search">
</nobr>
</div>
<div class="results-top"></div>
<div class="results-container">
<div class="row-fluid">
<div class="span1">Title</div>
<div class="span2">My Notes</div>
</div>
<ul class="item-list" style="display:none;">
<li ng-repeat="(key,item) in lists">
<div class=" row-fluid">
<div id="xedittxt" ng-controller="Ctrl" class="span2">
</div>
<div class="span2">{{item.user_notes}} </div>
</div>
</li>
</ul>
in my controller.js
app.controller("remindersController", function ($scope, $modal, $http) {
$scope.items = [];
//api
$scope.getListApi = '....URL REMOVED';
var callback = 'callback=JSON_CALLBACK';
$scope.init = function () {
//items selected from results to add to list
$scope.selectedItems = [];
var $loading = $('.loading');
var $searchOptions = $('.search-options');
var $itemList = $('.item-list');
$scope.getRemindersByUserId = function (userId) {
$itemList.hide();
$loading.show();
var getListUrl = $scope.getListApi + "1&" + callback;
console.log(getListUrl);
$http.jsonp(getListUrl).success(function (data) {
$scope.lists = data;
$loading.hide();
$itemList.show();
}).error(function (err) {
console.log("getRemindersByUserId error: " + err);
});
};
};
});

Categories