I have recursive partial in angular for showing comments threads. And I have controls for edit and delete. Deleting working on server but i can't update client.
My main page:
<div class="list-group-item" ng-repeat="ch in img.comments" ng-include="'views/nestedComment.html'">
</div>
My partial look like:
<div class="list-group-item-info">
<h4>{{ch.app_user.email}}:</h4>
{{ch.body}}
<div class="controls" ng-if="ch.app_user_id==user.getUser().id">
<%=t :edit %>
<%=t :destroy %>
<%=t :answer %>
<%=t :shownested %>
<div class="list-group-item-danger" ng-repeat="ch in ch.children" ng-show="nested" ng-include="'views/nestedComment.html'">
</div>
</div>
</div>
And I use this function to delete
$scope.deletenested=function(parent,item){
$scope.$evalAsync(function(){
parent.children.splice(parent.children.indexOf(item),1);
})
$http.delete('/comments/'+item.id)
.success(function(){
alert('OK')
parent.children.splice(parent.children.indexOf(item),1)
})
.error(function(response,status){
if (status=='401'){
alert('You have to autorize')
$window.location.href='http://localhost:3000/app_users/sign_in';
}
})
}
This worked for me when i didn't use partials. But now i can't access to parent array.
Related
I have hash of users as the following:
{"A1": {name: "Demo-1", status: "active"}, "A2": {name: "Demo-2", status: "deactive"}};
And I have two hashes of active/deactive users, and I make the table of each of them as the following:
<tr ng-repeat="(id, user) in deactiveUsers">
<td>
{{ user.name }}
</td>
<td>
<button type="button" ng-click="change(id)">Active</button>
</td>
</tr>
And If I click on Active button, I remove the object from deactiveUsers, and add it in activeUsers, the change function as the following:
$scope.change = function(id){
if($scope.users[id].status == "active"){
delete $scope.activeUsers[id];
$scope.users[id].status = "deactive";
$scope.deactiveUsers[id] = $scope.users[id];
}else{
delete $scope.deactiveUsers[id];
$scope.users[id].status = "active";
$scope.activeUsers[id] = $scope.users[id];
}
}
This my demo, it's working well if I tried it on plnkr. But on my localhost the deleting only is working, when I add on activeUsers the DOM element doesn't update with the new record.
I can't find out the issue.
How can I add in Hash to update the DOM element dynamically ?
why it's working on plnkr, but the same code doesn't work on localhost ?
You have multiple body tags in your DOM. I think the first (after the first table element) cause the others angular directives are outside the app.
Replace the body in your table elements by tbody elements.
Edit By the question's owner
My Error was I developed the tables as the following:
<div class="panel panel-primary" ng-controller="ExampleCtrl">
<table></table>
</div>
<div class="panel panel-primary" ng-controller="ExampleCtrl">
<table></table>
</div>
So, I called ng-controller twice, I fixed it by develop one div for the both as the following:
<div ng-controller="ExampleCtrl">
<div class="panel panel-primary">
<table></table>
</div>
<div class="panel panel-primary">
<table></table>
</div>
</div>
I am trying to set a variable to template with if in the HTML. The issue is that I can't see my template and don't have any errors from the logs. I can see that elements are in the HTML but still can't see it.
The template is:
<div class="list-group">
<div id="table_template">
<div id ="table"></div>
<script type="text/template" id="nextPage">
<% if (nextLink != "") { %>
<nav><ul class="pager"><li><a href="#" id="next_page" >Next</a></li> </ul> </nav>
<%}%>
</script>
</div>
</div>
</div>
and the view:
var template = _.template($('#nextPage').html());
view.$el.find('#nextPage').html(template(listSongs));
Update: Looks like I am unable to see it if I have script tag.
A script tag is used so that the browser does NOT render that piece into the whole DOM. You did that assuming that the script tag will print into the view but it won't. You will need to inject it into the view. Try this:
<div class="list-group">
<div id="table_template">
<div id ="table"></div><div id="nextPage"></div>
<script type="text/template" id="nextPageTemplate">
<% if (nextLink != "") { %>
<nav><ul class="pager"><li><a href="#" id="next_page" >Next</a></li> </ul> </nav>
<%}%>
</script>
</div>
</div>
Then in your view it can look like this:
var template = _.template($('#nextPageTemplate').html());
view.$el.find('#nextPage').html(template(listSongs));
Now I'm unsure if your view El is "list-group" (but I hope it is).
I am using nodejs + Angular and html as a froentend
Here is my HTML Code
<div id="container" ng-app='two_way' ng-controller='two_way_control'>
<div class="row" ng-repeat="data in profile_pictures">
<div class=".col-sm-6 .col-md-5 .col-lg-6" style="background-color:#eee;height:150px;width:500px;margin-left:240px;margin-top:20px;">
<h4 style="padding:10px;">User Say's</h4><hr>
<img src="{{data.profile_picture}}" class="img-circle" style="width:100px;height:100px;margin-left:-140px;margin-top:-130px;">
</div>
</div>
</div>
and my angular code is here
app.controller('two_way_control',function($scope,$http,$interval){
load_pictures();
$interval(function(){
load_pictures();
},300);
function load_pictures(){
$http.get('http://localhost:3000/load').success(function(data){
$scope.profile_pictures=data;
});
};
});
and my server code is
app.get('/load',function(req,res){
connection.query("SELECT * from user_info",function(err,rows){
if(err)
{
console.log("Problem with MySQL"+err);
}
else
{
res.end(JSON.stringify(rows));
}
});
});
Which is working fine..
When i entered a new record in **user_info*. it will display new record to me.
Is this right way to do two way data binding or i am missing something
Please help.
Thanks
It looks as if you're doing one way binding because your angular code is never modifying the profiles pictures in the table (meaning you ain't got no form fields, your page is read only). But AFAIK you're doing everything right, as soon as you add editing capabilities to your angular page you would be doing two way binding all the way
YES! Angular '2-way bind' is between scope.variable and VIEW (ng-model in input elements).
In this case, the SRC property of IMG element need to be setd with ng-src!
Because IMG is a html element that load before angular principal scripts.
<div id="container" ng-app='two_way' ng-controller='two_way_control'>
<div class="row" ng-repeat="data in profile_pictures">
<div class=".col-sm-6 .col-md-5 .col-lg-6" style="background-color:#eee;height:150px;width:500px;margin-left:240px;margin-top:20px;">
<h4 style="padding:10px;">User Say's</h4><hr>
<img ng-src="{{data.profile_picture}}" class="img-circle" style="width:100px;height:100px;margin-left:-140px;margin-top:-130px;">
</div>
</div>
</div>
In AngularJS, to simply show a field through an a tag, I would do in this way:
<div ng-show="aField">Content of aField</div>
<a ng-click="aField=true">Show aField</a>
until here, no problem.
I would like now to put more buttons and fields so that, when I click on A it shows the content of A, then when I click on button B, content of A disappears and content of B appears.
How can I do this? Thank you.
UPDATE
Thank you everyone for your solutions, they works! Now, I am doing a template for every content of and because I have much data to show but all in the same structure.
Here the index.html
<div ng-model="methods"
ng-include="'templateMethod.html'"
ng-repeat = "method in methods">
here the script.js:
function Ctrl($scope) {
$scope.methods =
[ { name: 'method1',
description: 'bla bla bla',
benefits: 'benefits of method1',
bestPractices : 'bestPractices',
example: 'example'},
{ name: 'method2',
description: 'bla bla bla',
benefits: 'benefits of method2',
bestPractices : 'bestPractices',
example: 'example'} ];
}
and here the templateMethod.html:
<table>
<tr>
<td>
<div ng-show="toShow=='{{method.name}}Field'">
<h3>{{mmethodethod.name}}</h3>
<p>
<strong>Description</strong>
{{method.description}}
</p>
<p>
<strong>Benefits</strong>
{{method.benefits}}
</p>
<p>
<strong>Best practices</strong>
{{method.bestPractices}}
</p>
<p>
<strong>Examples</strong>
{{method.example}}
</p>
</div>
</td>
<td class = "sidebar">
<ul>
<li><a ng-click="toShow='{{method.name}}Field'" class="{{method.name}} buttons">{{method.name}}</a></li>
</ul>
</td>
</tr>
</table>
It works!
But: if I click the first button and then the second one, the content of the first button do not disappear, it appears under the content of the first button...
Problem with the repetition?
Thanks
It might be better to handle more complex logic in the controller, but in general think about the content of the directive strings as normal js:
<div ng-show="aField">Content of aField</div>
<div ng-show="bField">Content of bField</div>
<a ng-click="aField=true; bField=false">Show aField</a>
<a ng-click="aField=false; bField=true">Show bField</a>
Or use ng-show in concert with ng-hide:
<div ng-show="aField">Content of aField</div>
<div ng-hide="aField">Content of bField</div>
<a ng-click="aField=true">Show aField</a>
<a ng-click="aField=false">Show bField</a>
In the former strategy, nothing shows upon page load. In the latter, the bField content shows by default. If you have more than two items, you might do something like:
<div ng-show="toShow=='aField'">Content of aField</div>
<div ng-show="toShow=='bField'">Content of bField</div>
<div ng-show="toShow=='cField'">Content of cField</div>
<a ng-click="toShow='aField'">Show aField</a>
<a ng-click="toShow='bField'">Show bField</a>
<a ng-click="toShow='cField'">Show cField</a>
I'm guessing that you have a list of items and want to show each item content. Something an accordion component does.
Here is a plunker that shows how you could do it: http://plnkr.co/edit/UTf3dEImiDReC89vULpX?p=preview
Or if you want to display the content on the same place (something like a master detail view) you can do it like this: http://plnkr.co/edit/68DJHL582oY4ecSiiUdE?p=preview
simply use one variable which content is visible. http://jsfiddle.net/gjbw7/
<a ng-click="show='a'">Show aField</a>
.
<div ng-show="show=='a'">Content of aField</div>
I would recommend to create a service in case your fields belong to different controllers.
Service:
App.factory('StateService', function() {
return {
openPanel: ''
};
});
Injecting the service in a Controller:
App.controller('OneCtrl', function($scope, StateService) {
$scope.stateService = StateService;
});
Finally using it a view:
<a ng-click="stateService.openPanel='home'">Home</a>
<div ng-show="stateService.openPanel == 'home'">Content of Home</div>
Demo: http://jsfiddle.net/codef0rmer/BZcdu/
Try this way.
<div>{{content}}</div>
<a ng-click="content='a'">Show aField</a>
<br>
<a ng-click="content='b'">Show bField</a>
<br>
<a ng-click="content='c'">Show cField</a>
<br>
<a ng-click="content='d'">Show dField</a>
<br>
<a ng-click="content='e'">Show eField</a>
<br>
<a ng-click="content='f'">Show fField</a>
Take a look at the ng-switch directive.
<div ng-switch="aField">
<div ng-switch-when="someValue1">
HTML content that will be shown when the aField variable value is equal to someValue1
</div>
<div ng-switch-when="someValue2">
HTML content that will be shown when the aField variable value is equal to someValue2
</div>
<div ng-switch-default>
This is where the default HTML content will go (if aField value is not equal to any of the ng-switch-when values)
</div>
</div>
I have an app in backbone and I want to know if is possible to sum inside a template value of the object.
For example I have this piece of template in underscore:
<% _.each(room1.combinations, function(room2) { %>
<div>
<div class="tot"><p>TOTAL:<span id="totale_<%= room2[0].attributes.id %>"></span></p>
</div>
<form method="POST" action="">
<% _.each(room2, function(room) { %>
<span><%= room.attributes.price %> EUR</span>
<% }); %>
<input type="button" class="submit-ricerca prenota-bt" name="buy" value="BUY">
</form>
</div>
<% }); %>
I want to put into the span with class total the sum of the price of each element inside it.
Is possible?
Thanks
Yes, it is possible. Just sum the prices (using reduce) and put them there:
<p>TOTAL:<span id="totale_<%= room2[0].attributes.id %>"><%=
_.reduce(room2, function(sum, room){return sum+room.attributes.price;}, 0)
%></span>