Within an ng-repeat block I have textboxes. To detect when the content differs from the original, the original data is stored in a variable.
<tr data-ng-repeat="p in products">
<td>
<textarea data-elastic data-ng-model="p.comment" data-ng-change="hasChanged=checkChange(original, rnd.comment);" data-ng-init="original=rnd.comment; hasChanged=false"></textarea>
</td>
<td class="save" ng-show="hasChanged" ng-click="save(p, original)">Save</td>
A save button is shown only when the content has changed. After a successful save the original value should be updated to the new value.
I can do it like this with a function in the controller:
$scope.save = function (p, original) {
//...successful save
this.original = p.comment; //this works
original = p.comment; //this does not
}
Relying on some implicit scope in the form of 'this' doesn't seem sensible.
Why doesn't updating the variable (original = ...) work? What's a smarter way to do this?
Based on comments I've updated it as follows:
ng-click="save(p, this)"
$scope.save = function (p, scope) {
//...successful save
scope.original = p.comment; //this works
}
This seems failrly sensible now. Is passing scope around like this considered bad practice or acceptable?
Products is defined as follows:
productStatusApp.controller('productStatusCtrl', function ($scope, $http, cid) {
$http.get('api/company/products/' + cid).success(function (data) {
$scope.products = data.products;
});
I've found the best way to avoid this kind of problems, is to use services
https://docs.angularjs.org/guide/services
http://viralpatel.net/blogs/angularjs-service-factory-tutorial/
some rough code(use it just for pointers, not tested at all)
<tr data-ng-repeat="p in ProductsService.products">
<td>
<textarea data-elastic data-ng-model="p.comment"></textarea>
</td>
<td class="save" ng-show="p.originalComment!==p.comment" ng-click="ProductsService.save(p)">Save</td>
</tr>
and
var module = angular.module('app', []);
module.service('ProductsService', function () {
var products = [postA,postB,...,PostC];
products = products.map(function(p){p.originalComment=p.comment});
var save = function(p){
p.originalComment=p.comment;
someAjaxRequest(function _callback(err,response){....})
}
return {products:products,save:save};
});
and
module.controller('ProductsController', function ($scope, ProductsService) {
$scope.ProductsService= ProductsService;
});
They also allow better readability , WIN WIN
Related
Im working on 2 apps that will simply display all active incidents and then all closed incidents. The 2 apps share similar logic when it comes to create, modify, save and delete.
So im trying to figure the best aproach to share the CRUD logic between the 2 applications. I tought maybe it would be best to set a parent - child controller setup like so:
Common_CRUD_file.js:
var Common_Application = .module('Common_Application ',[app, app1, app2, app3])
Parent_controller.controller('Parent_controller'), function ($scope, $http, $filter, $timeout) {
//all my CRUD logic goes in here
$scope.edit = function(data) { //edit logic goes here }
$scope.save = function(data) { //save logic goes here }
$scope.cancel = function(data) { //cancel logic goes here }
$scope.delete = function(data) { //delete logic goes here }
}
Child_Show_closed_incidents.js:
var Common_Application = angular.module('Common_Application');
Child_controller.controller('Child_controller'), function ($scope, $http, $filter, $timeout) {
//All of the app logic goes here
$scope.get_data = function(data) { //store fetched ajax data in $scope.All_closed_incidents }
}
Quick excerpt of the HTML file:
<div ng-app="Common_Application" ng-controller="Parent_controller">
<div ng-controller="Child_controller">
<table directive_for_angular_app_here>
<tr>
<td></td>
<td>Description</td>
<td>Status</td>
</tr>
<tr ng-repeat="incident in All_closed_incidents">
<td><button type="button" ng-click="edit(incident)">Edit</button></td>
<td>{{incident.Description}}</td>
<td>{{incident.Status}}</td>
</tr>
</div>
</div>
So this setup is able to load my table but the edit function dosent seem to fire at all when I click on the button. No errors in the console either. Seems to ignoring my Parent functions all together when I was expecting it to share all of its scopes. Would anyone have a better aproch to this?
I would discard the parent/child setup you have. Turn the parent into a service with functions:
//all my CRUD logic goes in here
$scope.edit = function(data) { //edit logic goes here }
$scope.save = function(data) { //save logic goes here }
$scope.cancel = function(data) { //cancel logic goes here }
$scope.delete = function(data) { //delete logic goes here }
then inject that service into the child controller and call the functions. Reduces complexity and enhances reusability.
I've been teaching myself how to use the as statement of Angularjs's controller, but struggling to make controllers communicate with others, using the as syntax.
<script type="text/javascript">
angular.module('angularApp', [])
.factory('MessageService', function(){
var message = {
addedItem: "initialMessge"
};
return {
returnMessage: message//This is supposed to be the "var message" defined above
};
})
.controller('DiaplayingProductController', function(MessageService){
var instance = this;
this.data = {
message: MessageService.returnMessage.addedItem
};
})
.controller('ProductController', function($scope, $http, MessageService) {
var instance = this;
this.data = {
message: MessageService.message,
//There are other stuff here
};
this.addItem = function(productName) {
$http({
//other tasks
}).then(function addSucces(response) {
instance.data.message.addedItem = productName;
});
};
});
<span ng-controller="DiaplayingProductController as dpc" ng-bind="dpc.data.message"></span>
<div ng-controller="ProductController as pc">
#foreach ($products as $index => $product)
<div class="product">
<button ng-click="pc.addItem({{$product->name}})>
Add it to Cart
</button>
</div>
#endforeach
</div>
I use Laravel, so {{$product->name}} and #foreach are Laravel's expression.
In a nutshell,
There are one <span> and multiple <button>s, based on the result of #foreach (Again, I use Laravel, so this is basically the same thing as php's foreach)
When one of the <button> is pressed, the content of <span> is supposed to be updated.
The event is triggered in ProductController, which is supposed to update message of DiaplayingProductController, via MessageService.
The message is not going to be sent to the span tag.
This question may be silly. However, there are not many information resources out there which deal with this as statements, so I'd like to ask some advice here. Thank you in advance!
What's this #foreach?
There's a coma in your attributes. Shouldn't be there.
The expression in your ng-click has a missing parenthesis. Also, it should be an expression, therefore the {{}} have nothing to do here.
The data object are not shared between the controllers. You should:
use directives and pass the data using attributes ('=').
set the data in the $scope, which is not as good a solution
use a service as an intermediary (each controller can set/get the value
from that service)
I am trying to hide a column in my table using ng-hide. Before the user logins the column should not been shown to the user. After they login the hidden column should be shown. But now after i used the ng-hide property the whole table is hidden if the user isnt login into the system. Can i know how to solve this problem.
This is my partial html code:
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>Title</th>
<th>Description</th>
<th ng-show="noteEnabled">Note</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="movie in movies | pagination: currentPage * entryLimit | limitTo: entryLimit" data-ng-class="{'selected':selectedFilm.film_id===movie.film_id}" >
<td>
{{movie.title}}
</td>
<td>
{{movie.description}}
</td>
<td data-ng-click="selectFilmDetails($event,movie)" ng-show="movie.noteEnabled" >
{{movie.comment}}
</td>
</tr>
</tbody>
</table>
This is my controller.js code:
.controller('AllMovieController',
[
'$scope',
'dataService',
'$location',
function ($scope, dataService, $location){
$scope.noteEnabled = false;
$scope.movies = [ ];
$scope.movieCount = 0;
$scope.currentPage = 0; //current page
$scope.entryLimit = 20; //max no of items to display in a page
var getAllMovie = function () {
dataService.getAllMovie().then(
function (response) {
var userName=dataService.getSessionService('user');
$scope.movieCount = response.rowCount + ' movies';
if(userName){
$scope.movies = response.data;
$scope.userLogin = dataService.getSessionService('user');
$scope.userLoginEmail = dataService.getSessionService('userEmail');
$scope.showSuccessMessage = true;
$scope.successMessage = "All movie Success";
$scope.noteEnabled = true;
}
},
function (err){
$scope.status = 'Unable to load data ' + err;
}
); // end of getStudents().then
};
$scope.numberOfPages = function(){
return Math.ceil($scope.movies.length / $scope.entryLimit);
};
//------------------
$scope.selectFilmDetails = {};
$scope.selectFilmDetails = function ($event,movie) {
$scope.selectFilmDetails = movie;
$location.path('/filmDetails/' + movie.film_id);
}
getAllMovie();
}
]
)
At first i set the noteEnabled to false and check with the session if the user is logged in then the noteEnabled will become true. Thanks in advance.
Use ng-hide="$parent.noteEnabled" instead of ng-hide="noteEnabled".
To access $scope variable from the loop (ng-repeat) use $parent
Here is a good example of how to use ng-show and ng-hide and here is the official documentation as well . Hope it helps !
In your case you have use ng-show/ ng-hide only to tag in of the column you want to show/hide. So on any scenario whole table will not be hide unless there is no data so you may is it as hidden.
Anyway as per you code, seems you have misused ng-show/hide. On controller initially you set noteEnabled to false and after you check the logging you set noteEnabled to true. as you have used ng-show/hide as follows
<td data-ng-click="selectFilmDetails($event,movie)" ng-hide="noteEnabled" >
{{movie.comment}}
</td>
the result will be; initially column will be shown and after your dataService receive userName it will hide the column. The opposite of what you want!!!. So change the directive you use from ng-hide to ng-show or change the value set to noteEnabled.
The real cause behind problem is, ng-repeat does create child scope which is prototypically inherited from parent scope, while rendering each iteration element where ng-repeat directive has placed.
And the you have used noteEnabled variable as primitive datatype, so when you use noteEnabled variable inside a ng-repeat div it does gets added inside that ng-repeat div scope.
noteEnabled property to be maintained on each element level of movies collection. Then do toggle, whenever you want.
ng-show="movie.noteEnabled"
By default it will be hidden & toggle it whenever you want to show it.
Even better approach is to follow controllerAs pattern where you don't need to care about prototypal inheritance. While dealing with such a variable access thing on UI.
I solved the problem by myself. Here is the solution for it.
$scope.noteEnabled = false;
$scope.movies = [ ];
$scope.movieCount = 0;
$scope.currentPage = 0; //current page
var getAllMovie = function () {
dataService.getAllMovie().then(
function (response) {
var userName=dataService.getSessionService('user');
$scope.movieCount = response.rowCount + ' movies';
if(userName){
$scope.movies = response.data;
$scope.userLogin = dataService.getSessionService('user');
$scope.userLoginEmail = dataService.getSessionService('userEmail');
$scope.showSuccessMessage = true;
$scope.successMessage = "All movie Success";
$scope.noteEnabled = true;
}else{
$scope.movies = response.data;
$scope.noteEnabled = false;
}
I have the following controller, and when I call $scope.remove() it makes a request to the usercart, which makes a request to the api. The api returns json object which has an object with an array of cart items.
The html on the page uses an ng-repeat to loop through the items, but the page isn't updating for some reason, and I can not figure out why.
// Main controller
app.controller('Checkout', function($scope, usercart){
$scope.cart = [];
$scope.$watch(function(){
return usercart.cart;
}, function(newVal, oldVal){
if(newVal !== oldVal){
$scope.cart = newVal;
}
}, true);
$scope.remove = function(domain){
usercart.remove(domain);
};
});
This service makes a request to the api and saves the cart data.
// User cart service
app.service('usercart', function(cart){
this.remove = function(domain){
// cart is an api service to make http requests
cart.removeDomain(domain).success(function(data){
this.cart = data.cart;
});
};
});
Here is a json response example:
{
"message":"Success",
"cart":[{
"domain":"asdfsadfsadf.org",
"years":2,
"amount":9
},{
"domain":"asdsmembers.cc",
"years":2,
"amount":24.95
},{
"domain":"asdsmembers.tv",
"years":2,
"amount":39.95
}]
}
Here is the html:
<tr ng-repeat="i in cart">
<td data-th="Product">
{{i.domain}}
</td>
<td data-th="Price">${{i.amount|number:2}}</td>
<td data-th="Quantity">
<select ng-model="i.years" ng-options="y.value as y.name for y in selYears" ng-disable="isInCart(i.domain)" ng-class="{disabled: isInCart(i.domain)}" ng-change="update(i.domain, 'years', i.years)"></select>
</td>
<td class="actions" data-th="" align="center">
<button class="btn btn-default btn-sm" style="background: #333;" ng-click="remove(i.domain)"><span class="glyphicon glyphicon-remove-circle" aria-hidden="true" style="color:#fff;"></span></button>
</td>
<td data-th="Subtotal" class="text-center">${{i.years * i.amount|number:2}}</td>
</tr>
Also when the page loads the table displays fine. It is just when I run the remove function.
I haven't tried but i believe here is the problem
cart.removeDomain(domain).success(function(data){
this.cart = data.cart;
});
Since this is a pointer to the caller of the callback function you will create cart property onto your cart api service. In order to circumvent this issue you should create variable called (by convention) self and assign this to it (at the begining of the usercart service):
var self = this;
after that, change your code into this:
cart.removeDomain(domain).success(function(data){
self.cart = data.cart;
});
To get better understanding you can go through this post
Watching your local $scope for a value you change in your singleton usercart definitely wouldn't work, unless you explicitely passed in that local scope. We can simplify this by ridding the $watch and resolving a promise we can return from our service instead. This allows for generic re-use and alleviates watchers from polluting our controllers. Observe the following changes...
app.service('usercart', function(cart) {
this.remove = function(domain) {
return cart.removeDomain(domain) // return promise
};
});
app.controller('Checkout', function($scope, usercart) {
$scope.remove = function(domain) {
usercart.remove(domain).then(function(data) { // resolve promise
$scope.cart = data.cart;
});
};
});
Very new to Angularjs. So I have some JSON files that I am reading into my webpage that contain and array of objects that are cars. What I am trying to do is have my "button" when pressed alert me to the data specific to that button.
The ng-repeat is running 8 times so that is the length of the array, but in angularJs i'm not sure how to basically store the array index for each time the ng-repeat passes in my button function.
This is my a snippet of my .html:
<div class="carTable table-responsive text-center" ng-controller="ButtonController" >
<table class="table specTable">
<thead>
<tr>
<th>Make</th>
<th>Model</th>
<th>Year</th>
<th>Color</th>
<th>Milage</th>
<th>Doors</th>
<th class="reserve">Horsepower</th>
<th>Price</th>
<th class="reserve"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="cars in car | orderBy:'year'">
<td>{{cars.year}}</td>
<td>{{cars.model}}</td>
<td>{{cars.make}}</td>
<td>{{cars.color}}</td>
<td>{{cars.mileage | number}}</td>
<td>{{cars.doors}}</td>
<td>{{cars.horsepower}}</td>
<td>{{cars.price | number}}</td>
<td><div class="panel panel-default">Reserve</div></td>
</tr>
</tbody>
</table>
</div>
The portion in question is at the bottom where I have a Reserve "button"
I'm leaving out my JSON files, works properly there. I'm just not sure how to keep track of the array index as the ng-repeat does its thing.
Here is the angular:
(function(){
var app = angular.module("myReserveApp", []);
app.controller("ButtonController", ["$scope", "$window", function($scope, $window){
$scope.buttonPress = function(){
$window.alert(JSON.stringify($scope.car[0]));
}
}]);
var MainController = function($scope, $http, $window){
var onGatherBoatData = function(response){
$scope.boat = response.data;
};
var onError = function(reason){
$scope.error = "Could not fetch Boat Data";
};
var onGatherCarData = function(response){
$scope.car = response.data;
};
var onError = function(reason){
$scope.error = "Could not fetch Car Data";
};
var onGatherTruckData = function(response){
$scope.truck = response.data;
};
var onError = function(reason){
$scope.error = "Could not fetch Truck Data";
};
$scope.message = "Hello, Angular Here!";
};
app.controller("MainController", ["$scope", "$http", "$window", MainController]);
}());
Currently in the top portion of the code I just have it alerting object[0] but I want it to be specific to which button is pressed. Any help is appreciated, thank you.
$index refers to the index in ng-repeat. So if you want to pass your function the index in array on the button click, change buttonPress() to buttonPress($index)
you'll have to change your controller to something like the following:
$scope.buttonPress = function(index){
$window.alert(JSON.stringify($scope.car[index]));
}
To do the following, you can just pass the current data in the ngRepeat. Moreover,if you want the current index, the ngRepeat directive provide specials properties, as the $index, which is an iterator.
$scope.buttonPress = function(car, index){
//Retrieve current data of the ngRepeat loop
console.log(car);
//Current index of your data into the array
console.log(index);
}
Then you can call your function like this :
Reserve
First, thank you both for the quick responses. Both of these answers work. I found another way to do it as well before reading your posts.
<div class="panel panel-default">
Reserve:{{car.indexOf(cars)}}
</div>
Using (car.indexOf(cars)) gives me the same result
$scope.buttonPress = function(index){
$window.alert(JSON.stringify(index));
}
Now when I click on the "button" it sends me back the array index, so now I should be able to play with that data. Thank you again both, for your help.