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.
Related
I have a array of task in which there are two duplicate departments, but i dont want to show the second duplicate record in ng-repeat, but only for the first record i want to show even if it is duplicate.
Here is my code, can anyone tell me where i'm going wrong.
<tr ng-repeat="t in item.requisitionTask track by t.id">
<td>
<div ng-hide="!$first ? item.requisitionTask[$index-1].department.departmentCode==$index.department.departmentCode : false">
{{t.department.departmentName}}</div>
</td>
Solved it by targeting the data particularly.
<td><div ng-hide="!$first ? item.requisitionTask[$index-1].department.departmentCode==item.requisitionTask[$index].department.departmentCode : false">
I suspect that you want to hide data if the previous item contains the same departmentCode as your current item. As mentioned in my comment, you should move this logic into a function on your controller's scope.
<tr ng-repeat="t in item.requisitionTask track by t.id">
<td>
<div ng-hide="isNotFirstOrSameCodeAsPrevious($index)">
{{t.department.departmentName}}
</div>
</td>
</tr>
In your controller:
function isNotFirstOrSameCodeAsPrevious($index) {
if ($index === 0) return false;
return item.requisitionTask[$index - 1].department.departmentCode ===
item.requisitionTask[$index].department.departmentCode;
}
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);
};
For example, in HTML page:
<tr ng-repeat="post in posts">
<td ng-click="activePost(post)" class="title">{{post.title}}</td>
<td><button class="btn btn-danger" ng-click="delete(post)">Delete</button></td>
<td><input type="checkbox" ng-model="post.active"
id="{{post.id}}" /></td>
</tr>
Then, I want something like:
element.all(by.repeater('post in posts')).then(function(posts) {
var activePost = posts[0].element(by.model('active'));
expect(activePost).toEqual(true);
});
This returns an unable to find element. I am basing this on this question and answer:
Protractor find element inside a repeater
The value passed into by.model() should be as is on the page:
var activePost = posts[0].element(by.model('post.active'));
Note that activePost variable would refer to an element, hence even if it's value would be false (unchecked checkbox), the expect(activePost).toEqual(true); expectation would be met. You need to assert the checkbox's value instead using isSelected():
expect(activePost.isSelected()).toBeTruthy();
I have two lists of items:
all_todos
my_todos
I want to create a directive that will update the check boxes of the todos if the my todos are updated anywhere else in the application.
<tr ng-repeat="todo in all_todos">
<td>
<input type="checkbox" ng-checked="_.findIndex(my_todos, function(t){return t.id == todo.id;}) > -1"/>
</td>
<td>
{{todo.title}}
</td>
</tr>
Angular doesn't like the starting curly brace in the ng-checked. I want to avoid writing a $scope.watch and placing a property on the array if possible.
try to create a function in your controller which take the content of your actual ng-checked directive and call it in the ng-checked.
you should have something like that
// your controller
angular.module('..').
controller('..', function() {
$scope.test = function() {
return _.findIndex(my_todos, function(t){return t.id == todo.id;}) > -1;
}
})
and in your html
<.... ng-checked="test()" />
i think the declaration of the function in your directive is the key of your issue
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