So, I have some messages in the Firebase, with text, auther and like. I'm going over them with ng-repeat:
<li ng-repeat="message in messages">
and I wanted to add a button for diss/like the message. I tried all kind of stuff, none worked. I hope to find something that works like that:
<span ng-if="message.like"><button ng-click="message.$setValue({like: !message.like})">Disslike Message</button></span>
<span ng-if="!message.like"><button ng-click="message.$setValue({like: !message.like})">Like Message</button></span>
I also tried to pass the message to a function but also - didn't worked :\
The usual way to go about this is to call a controller function, using the $index magic variable (which represents the current item's index) – instead of storing functions on the object to modify itself:
<button ng-click="invertLike($index)">
And in your controller:
$scope.invertLike = function (index) {
messages[index].like = !messages[index].like;
};
I think u want to toggle between like and dislike button at runtime. See below to do that. JSFiddle for reference - Demo
Hope this helps!
<body ng-app="SampleApp">
<table ng-controller="myController" border="1px">
<thead>
<tr>
<td>text</td>
<td>author</td>
<td>like/dislike button</td>
</tr>
</thead>
<tbody ng-repeat="message in messages">
<tr>
<td>{{message.text}}</td>
<td>{{message.author}}</td>
<td>
<button ng-click="message.like = !message.like">
<span ng-show="message.like">Like Button</span>
<span ng-show="!message.like">Dislike Button</span>
</button>
</td>
</tr>
</tbody>
</table>
</body>
Okay, so I did some mix&match with Sumit & Ven's answers.
Thank you both!
In the html:
<button ng-click="message.like = !message.like; invertLike($index)">
<span ng-show="!message.like">Like Button</span>
<span ng-show="message.like">Dislike Button</span>
</button>
In the controller:
$scope.invertLike = function(index) {
$scope.messages.$save(index);
};
Related
I'm trying to implement search method for "chat channels" that for every query it represents the compatible results from SQL table from the database.Each result can be distinguished by a unique ID that is also comes from the SQl table.I don't want to show the ID's so I put them in a hidden input for each result using ng-model.Also, for each, result the user have a possibility to subscribe to the channel (subscribe button) displayed in this result,so in order to save the subscription properly,I need to get the ID saved in the hidden input of the same result.
Here's what I tried:
<table class="table table-condensed">
<tr class="separating_line" ng-repeat="x in result">
<!-- ng-bind-html allows to bind a variable to the innerHTML part of the HTML element -->
<td>
<div class="col-md-8">
<h4><b style="color: gray;">{{ x.Name }}</b></h4>
<br><p> {{ x.Description }}</p>
</div>
<div class="col-md-2">
<small><label style="color: gray;">Subscribers </label>{{ x.Subscribersnum }}</label></small><br>
<input id="hiddenId" hidden="hide" ng-model="idval=x.ChanID" />
<button ng-click="subscribechannel()" class="btn btn-primary">Subscribe</button>
</div>
</td>
</tr>
</table>
In the controller I send it in the following way to convenient Servlet:
$http.get("http://localhost:8080/ExampleServletv3/subscribeservlet",{
params: {
subidval: $scope.idval
}
})
But when debugging the value that I get in the servlet is null.
How can I solve this? Any ideas?
Thanks
You don't need any hidden field to do what you want. All you need is to pass a parameter to your function:
<tr class="separating_line" ng-repeat="x in result">
...
<button ng-click="subscribechannel(x)" class="btn btn-primary">Subscribe</button>
I'm trying to do a table (with a lot of data) with Angular, the table is already done with PHP but to add a filter is easier using Angular. PHP takes 10secs to draw the entire table of 11k rows, but Angular keeps going on and on, even Firefox tells me that a script is unasnwered. If I click continue, the message is shown again, if I click cancel the page does nothing, if I press debug it continues running but nothing is shown.
At first, I thought that drawing +11k rows in HTML with the ng-repeat was too much and that was causing the problem, so I added a limitTo (50) and also added a infinite scroll div. But it's still not showing anything and keeps on loading.
Here is some code:
<div ng-app='mainApp'>
<div ng-init='values=[".$angularString."]' ng-controller='seeTickets as tickets'>
<div infinite-scroll='tickets.loadMore()' infinite-scroll-distance='1'>
Filtro: <input type='text' ng-model='globalSearch.$'/><br><br>
<script type='text/javascript'>
var app = angular.module('mainApp', []);
app.controller('seeTickets', function(){
this.totalDisplayed = 50;
this.loadMore = function(){
this.totalDisplayed += 50;
}
});
</script>
<table>
<tr ng-repeat="value in values | filter:globalSearch | limitTo:tickets.totalDisplayed">
<td> {{value.id_ticket}} </td>
<td> {{value.ticket_date}} </td>
<td> {{value.ticket_subject}} </td>
<td> {{value.ticket_from}} </td>
<td> {{value.ticket_to}} </td>
<td> {{value.ticket_priority}} </td>
</tr>
</table>
</div>
</div>
</div>
Am I doing something wrong? Is there a way to work this out? Why it's keep on loading even if I set limitTo?
Add track by $index to ng-repeat like this:
<tr ng-repeat="value in values | filter:globalSearch | limitTo:tickets.totalDisplayed track by $index">
...
</tr>
I have a button:
<button data-ng-click="toggleElement(asset)" class="btn"><span class="text-center">Add To Cart</span></button>
I would like to hide this button when this element will add in a list and show
a disable button with the title "Added to Cart"!!
I tried it :
<table class="table" data-ng-show="elements!=null && elements.length>0">
<tr data-ng-repeat="element in elements">
<td>
<button data-ng-click="toggleElements(element)" ng-disabled="isDisabled" ng-model="isDisabled" class="btn"><span class="text-center">Add To Cart</span></button>
<td> <button data-ng-click="toggleAsset(elements[$index])" data-ng-disabled="added" class="btn">{{added ? 'Added' : 'Add'}}</button>
</td>
</tr>
</table>
in my controller I have this :
$scope.toggleElements= function (element){
.....
$scope.added = true;
}
Somebody can help me...
I think this will work for you:
<button ng-click="toggleElement(asset)" ng-disabled="asset.added">{{asset.added ? 'Added' : 'Add'}}</button>
You'll need to set the property asset.added inside the toggleElement() method.
You can execute several instructions inside one ng-click directive.
Just separate them with ; like a normal javascript expression.
For example:
<button ng-click="doIt(); hide = true" ng-hide="hide">
click me!
</button>
here is one solution.
Have a look to the plunk
<button ng-repeat="a in [0,1,2]" data-ng-click="added = !added" class="btn" ng-disabled="added">
<span ng-show="!added" class="text-center">Add To Cart</span>
<span ng-show="added" class="text-center">Added To Cart</span>
</button>
Within a ng-repeat I have a ng-switch conditional. I want the value of the ng-switch argument to be a binding. However the curly-bracket binding doesn't seem to be converted into the expected generated value. I'm aware that ng-switch creates a new scope, and that is surely causing the problem. I know about a 'dot' work-around but as the values here are coming from a service via a controller query, I can't figure out how to implement it in this situation.
html
<tr ng-repeat="user in users">
<td ng-switch on="editState"><p ng-switch-when="noEdit">{{user.username}}</p><input type="text" value="{{user.username}}" ng-switch-when="{{user.username}}"></td>
</tr>
controller.js
$scope.users = Users.query();
-edit-
this is the function that triggers the switch
$scope.editUser = function(usernameEdit) {
$scope.editState = usernameEdit;
};
A single $scope.editState won't work if you want to be able to edit multiple users at the same time. I suggest putting an edit property on each user, and use that property to control the ng-switch:
<tr ng-repeat="user in users">
<td ng-switch on="user.edit">
<span ng-switch-when="true">
<input type="text" value="{{user.username}}">
done
</span>
<p ng-switch-default>
edit {{user.username}}
</p>
</td>
</tr>
Fiddle
I have a list of things with switches. How can I get each switch to call a function with that object and the switch as parameters?
I have tried to set the "ng-change" directive for my checkboxes, but the function doesn't seem to get called. How do I call the toggleSync function I made?
I am a total newb, so I'm sorry if I need serious help.
<div id="track-list" ng-controller="Controller" ng-init="update()">
<div class="data-table">
<table class="table table-hover tablesorter">
<tr ng-repeat="item in items">
<td><a href='{[{item.path}]}/{[{item.id}]}'>{[{item.title}]}</a></td>
<td>{[{item.time_created}]}</td>
<td>
<div class=checkbox>
<input ng-model="value" id="check{[{$index}]}" type="checkbox" ng-checked="!item.deleted" ng-change="toggleSync(item.id, this)" ng-true-value="YES" ng-false-value="NO"/>
<label for="check{[{$index}]}">{{value}}</label>
</div>
</td>
</tr>
</table>
function Controller($scope) {
console.log("init");
$scope.items = [];
$scope.toggleSync = function(objectId, input) {
console.log("toggle sync");
}
}
Here is a plunker with your code and some corrections (ie: you used the tags delimiters {[{item.title}]} instead of {{item.title}})
Link: http://plnkr.co/edit/f9ngMMe8XJT4QDlA0Nx0?p=preview.
In this demo, there is a table with rows to display the item.path/item.id as a link, followed by the item.title and a checkbox which value is set to YES/NO according to its state. When the checkbox state has changed, the toggleSync function is called with the item as a parameter. The input checkbox has as model item.value, which is a property available inside of the toggleSync function.