I have a controller that I use in two places: in a ng-view and in a ng-include. These places are not child or parent to each other, but I want to some changes made in the ng-view affect to ng-include as well. How can I do that?
Here is plunker with these parts of code.
I want to when "Edit user" is clicked the user.userName from the table shows in the popup.
index.html
<body>
<div ng-view></div>
<div ng-include="'edit-user.html'"></div>
<script src="app.js"></script>
<script src="UsersController.js"></script>
</body>
app.js
var app = angular.module('myApp', ['ngRoute', 'ui.materialize'])
.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'users.html',
controller: 'UsersController'
})
.otherwise({redirectTo: '/'});
}]);
users.html
<h4>Users</h4>
<table class="striped highlight">
<thead>
<tr>
<th data-field="displayName">Display Name</th>
<th data-field="userName">User Name</th>
<th data-field="registered">Registered</th>
<th data-field="updated">Updated</th>
<th data-field="email">Email</th>
<th data-field="authority">Authority</th>
<th data-field="edit">Edit</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td ng-bind="user.displayName"></td>
<td ng-bind="user.userName"></td>
<td ng-bind="user.registered"></td>
<td ng-bind="user.updated"></td>
<td ng-bind="user.email"></td>
<td ng-bind="user.authority"></td>
<td><a class="collection-item waves-effect waves-teal" modal open="openModal" ng-click="openModalFunc(user)">Edit user</a></td>
</tr>
</tbody>
</table>
<a data-target="edit-user" class="hide" modal open="openModal">Edit user</a>
UsersController.js
app.controller('UsersController', ['$scope', function($scope) {
// create fake users
$scope.users = [
{
displayName: 'Alexander',
registered: '02-07-2017',
updated: '02-07-2017',
email: 'alex#gmail.com',
authority: 'admin',
userName: 'Alex'
},
{
displayName: 'Lev',
registered: '02-07-2017',
updated: '02-07-2017',
email: 'lev#gmail.com',
authority: 'guest',
userName: 'Lev'
}
]
$scope.openModal = false;
$scope.openModalFunc = function(user) {
$scope.openModal = true;
$scope.selectedUser = user;
Materialize.toast('Awesome, we did it!', 4000);
}
}]);
edit-user.html
<div id="edit-user" class="modal col l3" ng-controller="UsersController">
<div class="modal-content">
<h4>{{selectedUser.userName}}</h4>
</div>
<div class="modal-footer">
<a class="modal-action modal-close waves-effect waves-green btn-flat">Agree</a>
</div>
</div>
If it is not very big application then you can use $broadcast from one controller and catch that using $on..
You can find more information here.
I've found that better solution is to move your data that need to be shared into the upper general scope.
Related
I am new to angularjs and unable to figure out why ng-click on a button is not working. I am pasting code below. I am using a django server to render the page.
HTML CODE:
<body ng-controller="myController">
<div class="container-fluid" >
<table class="col-xs-12-ls-12 mfPortfolioTable" width="100%">
<tbody>
<tr ng-repeat="x in records">
<td class="search_table_cell col-xs-1-ls-1">{% verbatim %}{{ x.units | number:3 }}{% endverbatim %}</td>
</tr>
<tr>
<td><button class="btn btn-primary" ng-click="updateMfPortfolio()" id="updateFolio">Update</button></td>
</tr>
</tbody>
</table>
</div>
</body>
CONTROLLER CODE:
var app = angular.module('searchApp', []);
app.controller('myController', function($scope, $http) {
$http.get('/somelink/').then(function(response){
$scope.records = response.data.data;
});
//This is the function which I expect to get triggered by ng-click
$scope.updateMfPortfolio = function(){
console.log('Updating MF Portfolio...');
$http.get('/somelink/').then(function(response){
console.log('Code reached here...');
$scope.records = response.data.data;
});
};
I know that similar questions have been asked and I have tried there answers but they have not worked for me, hence I'm asking new question, here is my code:
hbs:
<link data-require="bootstrap-css#*" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<title>UI</title>
<div ng-controller="appCtrl">
<button type="button" ng-click="openModal()">Abc</button>
</div>
<script type="text/ng-template" id="checklistModal.html">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" ng-click="cancel()"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal</h4>
</div>
<div class="modal-body" id="modal-body">
<div style="padding-left: 3%; padding-right: 3%; margin-bottom: 8%;">
<div class="row">
<div class="col-md-12">
<table style="border-bottom: 2px solid #cccccc" class="table table-bordered">
<thead style="display:table;width:100%;table-layout:fixed;">
<tr>
<th style="text-align:center;" width="15%"></th>
<th style="text-align:center;" width="15%">Pending</th>
<th style="text-align:center;" width="15%">Done</th>
</tr>
</thead>
<tbody style="display:block;height:164px;overflow:auto;">
<tr style="display:table;width:100%;table-layout:fixed;">
<td style="text-align:center;">Task 1</td>
<td style="text-align:center;"></td>
<td style="text-align:center;"></td>
</tr>
</tbody>
</table>
<button class="btn btn-primary pull-right" ng-click="" style="float:right;">Save</button>
</div>
</div>
</div>
</div>
</script>
And here is corresponding js:
var app = angular.module("demoApp", ['ui.bootstrap']);
app.controller("appCtrl",['$scope', '$uibModal', function($scope, $uibModal) {
'use strict';
$scope.openModal = function(){
var parentElem = parentSelector ?
angular.element($document[0].querySelector('.modal-demo ' + parentSelector)) : undefined;
var modalInstance = $uibModal.open({
ariaLabelledBy: 'modal-title',
ariaDescribedBy: 'modal-body',
templateUrl: "checklistModal.html",
controller: 'ChecklistModalInstanceCtrl',
scope: $scope,
size: "lg",
appendTo: parentElem,
resolve: {
}
});
modalInstance.result.then(function (selectedItem) {
$ctrl.selected = selectedItem;
}, function () {
});
}
}]);
app.controller('ChecklistModalInstanceCtrl', function($scope) {
});
Error I get is: Unknown provider: $uibModalProvider <- $uibModal <- appCtrl
If, I change first line of js:
var app = angular.module("demoApp", []);
Error I get is: Failed to instantiate module demoApp
Answers to similar questions I found did not work, can anyone please help?
You need to inject ui.bootstrap as a dependency to your module,
var app = angular.module('app',['ui.bootstrap']);
also add the reference as well
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.3.js"></script>
I'm using UI-Router for routing.
When i load a .html page using this code :
$stateProvider.state("admin.cabletv.all-invoice", {
url: "/all-invoice",
templateUrl: "app/invoice/invoice-list.html",
params: {
'type': '1'
},
cache: false
});
invoice-list.html
<div class="panel panel-primary" ng-controller="pqsInvoiceListController as model">
<div class="panel-heading">
<div class="row">
<div class="col-sm-2">{{model.pageTitle}}</div>
<div class="col-sm-2 col-sm-offset-8">
<button class="btn btn-default" ng-click="model.printInvoice()">Print</button>
</div>
</div>
</div>
<div class="panel-body">
<div style="overflow-x: auto">
<table class="table table-bordered">
<thead>
<tr>
<th><input type="checkbox" ng-model="model.selectedAll" ng-change="model.checkAll()" autocomplete="off" /></th>
<th>In. no</th>
<th>Type</th>
<th>Client</th>
<th>Client Id</th>
<th>Mobile No</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="invoice in model.invoices">
<td><input type="checkbox" ng-model="model.idList[invoice.id].isSelected"/></td>
<td>{{invoice.id}}</td>
<td>{{invoice.invoiceType | pqsInvoiceType}}</td>
<td>{{invoice.connection.client.name}}</td>
<td>{{invoice.connection.client.id}}</td>
<td>{{invoice.connection.client.mobileNumber1}}</td>
</tr>
<tr ng-if="model.invoices.length">
<td colspan="12">Total</td>
<td>{{model.totalAmount}}</td>
<td colspan="4"></td>
</tr>
</tbody>
</table>
</div>
</div>
Part of my controller
(function (module) {
var pqsInvoiceListController = function () {
var vm = this;
vm.idList = {};
var buildIdList = function(invoices) {
angular.forEach(invoices, function (invoice) {
vm.idList[invoice.id] = {isSelected : false};
});
};
vm.checkAll = function () {
vm.selectedAll = !!vm.selectedAll;
angular.forEach(vm.idList, function (id) {
id.isSelected = vm.selectedAll;
});
};
};
module.controller("pqsInvoiceListController", pqsInvoiceListController);
}(angular.module("pqs.ui")));
invoice-list.html page is loaded, but the control(checkbox) in this page is not working. When i click checkbox it is not working. If i reload page using F5 then it works fine. How can i solve this problem without reloading page.
var app = angular.module("myapp", ["ngSanitize"]);
app.controller("controller", ['$scope', function($scope) {
$scope.tasks = [{
item: "Shopping",
status: true
}, {
item: "Cleaning",
status: false
}];
}]);
and html
<div ng-app="myapp">
<div ng-controller='controller'>
<table border=1 ng-repeat='task in tasks'>
<tr>
<td>{{task.item}}</td>
<td>{{task.status}}</td>
</tr>
</table>
</div>
</div>
I tried as above but i could not able to attach header to the table.And at the place of Done I am tring to attach a checkbox...I mean if status is true the chexk box must be checked or else unchecked.
Output:
Item Done
Shopping checkbox with ticked
Cleaning checkbox without ticked
See documentation for checkbox input
Not exactly the answer, but why do you repeat table instead of rows?
<div ng-app="myapp">
<div ng-controller='controller'>
<table border=1 >
<tr>
<th>Name</th>
<th>Status</th>
</tr>
<tr ng-repeat='task in tasks'>
<td>{{task.item}}</td>
<td><input type="checkbox" ng-model="task.status"></td>
</tr>
</table>
</div>
</div>
But I don't see any sense in table in your case.
<span ng-repeat="task in tasks">
<input type="checkbox" ng-model="task.status"> {{task.item}}
</span>
That would be much cleaner.
Do changes as follows in the HTML.
<body ng-app="myapp" ng-controller="ListController">
<table border="1" ng-repeat='task in tasks'>
<tr>
<td>
{{task.item}}
</td>
<td>
<input type="checkbox" ng-model="task.status">
</td>
</tr>
</table>
</body>
Do changes in the Angular js as follows.
var app = angular.module("myapp", []);
app.controller("ListController", ['$scope', function($scope) {
$scope.tasks = [{
item: "Shopping",
status: true
}, {
item: "Cleaning",
status: false
}];
}]);
I am using Angular to populate a few pages with REST data and have a list of articles for which I want a link to show the article details for that article. Basically, I need to filter the REST call I use for an individual article by the routeparam that is passed to it.
It appears to be passing the routeparam as expected, but I am having some challenges getting the REST call to work on my details page (articles.html), and I suspect that I am not getting/matching the ID in my REST call to the ID passed by the routeparam. My first REST call works for the categories.html page which lists all articles. I am using Angular's ngResource API with $resource. Here is the applicable code:
app.js (routing)
var pfcModule = angular.module('pfcModule', ['ngRoute', 'pfcServices', 'pfcControllers']);
pfcModule.config(['$routeProvider', function ($routeProvider) {
$routeProvider.
when('/home', { templateUrl: './views/home.html'}).
when('/categories', { templateUrl: './views/categories.html', controller: 'pfcCtrl' }).
when('/articles/:articleID', { templateUrl: './views/articles.html', controller: 'pfcCtrl2' }).
otherwise({ redirectTo: '/home' });
}]);
services.js (REST Call)
var pfcServices = angular.module('pfcServices', ['ngResource'])
pfcServices.factory('pfcArticles', ['$resource',
function($resource){
return $resource('https://pfc.azure-mobile.net/tables/articles/:articleID', {});
}]);
controllers.js (Controllers)
var pfcControllers = angular.module('pfcControllers', []);
pfcControllers.controller('pfcCtrl', ['$scope', 'pfcArticles', function ($scope, pfcArticles) {
$scope.data = pfcArticles.query();
}]);
pfcControllers.controller('pfcCtrl2', ['$scope', '$routeParams', 'pfcArticles', function ($scope, $routeParams, pfcArticles) {
$scope.data2 = pfcArticles.get({ articleID: $routeParams.articleID });
}]);
categories.html (partial, working as expected)
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<table class="table table-striped">
<tr>
<th>ID</th>
<th>Title</th>
<th>Category ID</th>
<th>Link</th>
</tr>
<tr ng-repeat="article in data">
<td>{{article.id}}</td>
<td>{{article.articletitle}}</td>
<td>{{article.articlecategoryid}}</td>
<td>Link</td>
</tr>
</table>
</div>
articles.html (partial, not working as I expect it to be filtered by the ID passed by the routeparam)
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<table class="table table-striped">
<tr>
<th>ID</th>
<th>Title</th>
<th>Category ID</th>
<th>Summary</th>
</tr>
<tr ng-repeat="article in data2">
<td>{{article.id}}</td>
<td>{{article.articletitle}}</td>
<td>{{article.articlecategoryid}}</td>
<td>{{article.articlesummary}}</td>
</tr>
</table>
</div>
After some researching, I adjusted my articles.html partial to not have a repeat as follows, and it is working:
<div class="row">
<div class="col-md-4">
<h2>Heading</h2>
<table class="table table-striped">
<tr>
<th>ID</th>
<th>Title</th>
<th>Category ID</th>
<th>Summary</th>
</tr>
<tr>
<td>{{data2.id}}</td>
<td>{{data2.articletitle}}</td>
<td>{{data2.articlecategoryid}}</td>
<td>{{data2.articlesummary}}</td>
</tr>
</table>
</div>