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
Related
I want to display an element conditionally based on the value of another parameter PaymentTypeid. After setting the condition as below the element Payment Channel is not rendering in the UI:
<tr ng-init="paymentMode='BANK CABS'" ng-if="json.name == 'paymentTypeId' && json.property == '1'">
<td><strong>{{ 'label.heading.paymentchannel' | translate }}:</strong></td>
<td ><span >{{paymentMode}} </span></td>
</tr>
However when i refactor the markup as below the element is showing as :
<tr ng-init="paymentMode='BANK CABS'">
<td><strong>{{ 'label.heading.paymentchannel' | translate }}:</strong></td>
<td ><span >{{paymentMode}} </span></td>
</tr>
PaymentTypeId is in a json array defined as follows in the controller:
scope.details = {};
resourceFactory.auditResource.get({templateResource: routeParams.id}, function (data) {
scope.details = data;
scope.details.paymentMode="";
scope.commandAsJson = data.commandAsJson;
var obj = JSON.parse(scope.commandAsJson);
scope.jsondata = [];
_.each(obj, function (value, key) {
scope.jsondata.push({name: key, property: value});
});
});
In the view PaymentTypeid renders as :
<table class="table" data-ng-show="details.commandAsJson" data-anchor>
<tbody>
<tr data-ng-repeat="json in jsondata">
<td class="width20"><strong> {{json.name}}</strong></td>
<td class="width80">{{json.property}}</td>
</tr>
</tbody>
</table>
Any insight on what i might be getting wrong. Im not entirely sure between using ng-if/ng-show or whether im setting json.property correctly.
Assuming that you have knowledge of scope in AngularJS.
There is a difference between using ng-if and ng-show. Whenever you use ng-if , it creates it own child scope. and you can manage it in custom directive that deals with its child scope (child scope is not available in controller unless you write your code in a way, that will make it available in controller) and you can hack the scope to use it in controller too. But that is not the case in ng-show.
When you use ng-show it will not remove your HTML from the DOM tree but if you use ng-if it will also remove your html from DOM tree. (To assist your confusion which one to use)
You have a scope issue here , if i'm getting it right. Use ng-show and it will work.
<div ng-show="condition">
your html markup
</div>
How do I add a new record and have angular "forget" the new item added after I click the corresponding button.
The ability to add a record works and when I add the new record it display in the table I have, correctly, However my problem is that when I go to add a second record ie I remove the previous input and type something else. This results in the newly added record below to also change.
In short after I add an item to my array I want angular to forget it. How do I accomplish this.
In my controller I have this
(function () {
var app = angular.module("mainApp");
var ordersController = function ($scope,$filter, ordersService,customerService) {
$scope.orders = [];
$scope.addOrder = function (newOrder) {
$scope.orders.push(newOrder);
}
app.controller("ordersController", ["$scope","$filter", "ordersService","customerService", ordersController]);
}());
in my html I have this
<div><table>
<tr>
<td><input ng-model="item.quantity" type="text" /></td>
<td><button type="button" ng-click="addOrder(item)">Add Line Item</button></td>
</tr>
</table></div>
<div>
<table>
<tr ng-repeat="order in orders track by $index">
<td>
{{ order.quantity }}
</td>
</tr>
</table>
</div>
The problem might be that you are adding the newOrder object to the array while Angular keeps it's model bound to that object. Try using Angular's copy functionality like this (assuming that you are using Angular 1):
$scope.addOrder = function (newOrder) {
var copiedOrder = angular.copy(newOrder);
$scope.orders.push(copiedOrder);
}
The documentation for the copy method can be found here.
I have an ng-if inside an ng-repeat in a template, and the ng-if is not working, even if I change it to just
ng-if="false"
I can make it work by adding
ng-controller="TemplateController"
to a parent div, however when I do this, my controller cannot receive resolved arguments:
resolve: {
myVar: function() {
return "hello world";
}
}
Unknown provider: myVarProvider <- myVar
if I remove the ng-controller, and add
controller: "TemplateController"
after my resolve:, then myVar is passed successfully, however ng-if no longer works
my HTML:
<table>
<div ng-repeat=“row in rows"><tr>
<span ng-if=“row.active==1">
<td>{{row.data}}</td>
<td></td>
<td>{{ row.date | date:"MM/dd/yyyy"}}</td>
<td>
<a href=“stuff”>click me</a>
</td>
</span>
<span ng-if=“row.active > 1">
<td>{{row.otherData}}</td>
<td>{{row.str}}</td>
<td>{{ row.date | date:"MM/dd/yyyy"}}</td>
<td>
<a href=“stuff”>click me instead</a>
</td>
</span></tr>
</div>
</table>
right now, I get a whole bunch of blank cells, and both 'click me' links.
if I remove the tags, it works, but it's not in a table
moreover, not only is the ng-if not working, but any variables I reference inside {{}} are being replaced with blanks (but they also work if is removed)
jsFiddle: http://jsfiddle.net/Mh2UH/1/
The golden rule to avoid this problem is
Always have a dot in your angular bindings
ng-if="false"
Does not have a dot. Therefore the value false is being passed to the scope of the ng-if but can't be updated, since false is an immutable boolean value.
The correct way,
ng-if=status.enabled
Where status is an object.
I have a movielist being rendered on my page for which my controller code looks like this
angular.module('rentalapp.controllers.rentals', ['restangular'])
.controller('rentalController', ['$rootScope','$scope', 'DataService', function($rootScope, $scope, DataService){
//$rootScope.obj = {search: []};
DataService.getRentals().then(function(data){
$scope.movielist = data;
});
}])
Everything works fine till I am trying to filter the list using a checkbox filter. I am including filters.html using ng:include. If the filter is part of the data template, everything works fine but if its part of ng:include the filters don't work. I know ng:include creates a child scope but I don't know how to get around this. My filter code looks like this
<input type="checkbox" data-ng-model='search.$' data-ng-true-value='Unrated' data-ng-false-value='' />Unrated</label>
and the data repeater is:
<tr ng-repeat="movie in movielist | filter:search">
<td>{{$index+1}}</td>
<td>{{movie.title}}</td>
<td>{{movie.year}}</td>
<td>{{movie.mpaa_rating}}</td>
<td><a class="btn btn-success" href="#/edit/{{movie._id.$oid}}">Edit</a></td>
<td><a class="btn btn-danger" href="#/delete/{{movie._id.$oid}}">Delete</a></td>
</tr>
As you pointed out, the included html gets it's own scope. To bind to the search property on the parent scope you can use:
<input type="checkbox" data-ng-model='$parent.search.$' />
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.