I am trying to force refresh my bindonce table after editing few records but I dont know how to use bindonce refreshOn attribute.
HTML Code:
<tbody bindonce="filteredItems" refresh-on="refreshTaskList" ng-repeat="task in filteredItems | orderBy:sortingOrder:reverse">
<tr>
<td><span bo-bind="task.serviceTypeName | isEmpty : 'None'"></span></td>
<td ><span bo-bind="task.percentageCompleted | isEmpty : 'Not Started'"></span></td>
</tr>
</tbody>
I am calling this line in my Controller:
$scope.refreshTaskList();
Also, I tried calling this as well but nothing works:
$scope.$broadcast('refreshTaskList');
Can you anyone please help me how to use this in a proper manner?
Change it to: refresh-on="'refreshTaskList'"
Example:
<button ng-click="refresh()">Refresh table</button>
$scope.refresh = function () {
$scope.$broadcast('refreshTaskList');
};
If it still doesn't work you might have a version that doesn't contain the refresh-on attribute.
Demo: http://plnkr.co/edit/nYPDMRG4b1OtkMolEEDQ?p=preview
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>
I'm looping through the properties of an object called an observation. One of those properties is ImageUrl. The ImageUrl is not important to the user and it's value is a Base64 image...so it's a mile long. I want to show all properties except the ImageUrl property. I'm trying to use ng-if to exclude it, but it's not working. Any tips? This is an old Angular 1 app at my work and I don't have any authority to upgrade it to Angular 2 or any other framework. I just need this ng-if to work or for someone to suggest an alternative that'd work. Thank you. This is my best try and it's not excluding ImageUrl. I can't get the ng-if to exclude anything.
<table>
<tbody>
<tr ng-repeat="p in properties(obs)">
<th ng-if="p !== 'ImageUrl'">{{p}}:</th>
<td ng-if="p !== 'ImageUrl'">{{obs[p]}}</td>
</tr>
</tbody>
</table>
The syntax would be:
<tr ng-repeat="(key, val) in obs">
<td ng-if="key !== 'ImageUrl'">{{val}}:</td>
<td ng-if="key === 'ImageUrl'">{{key}}</td>
</tr>
That way 'ImageUrl' will be shown in case of the ImageUrl property, else the value of the property.
I have a table, I am already given it CSS using ng-class if they satisfy a condition. Now I want to show only those rows who satisfy the same condition on a button click. I have wrote a controller which checks if the data received is within 24 hours are not and marks the data cell. Until this it's working.Now I need to add a button and show only the row which has this td marked as not received in time.
<tbody>
<tr ng-repeat ="data in log">
<td>{{data.UniqueId}}</td>
<td>{{data.Name}}</td>
<td ng-class ="{'data-notreceived' : dataNotReceived('data.receivedTime')}">{{data.receivedTime
}}
</tbody>
</table>
I think something like this should work. Basically, clicking the button will toggle between showing all or only the items marked as 'data not received'.
<tbody>
<tr ng-repeat ="data in log" ng-show="showAll || dataNotReceived(data.receivedTime)">
<td>{{data.UniqueId}}</td>
<td>{{data.Name}}</td>
<td ng-class ="{'data-notreceived' : dataNotReceived('data.receivedTime')}">{{data.receivedTime}}
</tr>
</tbody>
// in controller
$scope.showAll = true;
$scope.onButtonClick = function() {
$scope.showAll = !$scope.showAll;
return false;
}
From the information provided in question what I can say is: Use ng-show to show rows based on your condition.
<tr ng-show ="your_condition">
You could also use an ng-if rather than ng-show. See the differences here.
Really depends on how often the hide/show toggle needs to happen.
<tbody>
<tr ng-repeat="data in log" ng-if="showLast24Hrs(data.ReceivedTime)">
<td>{{data.UniqueId}}</td>
<td>{{data.Name}}</td>
<td>{{data.ReceivedTime}}</td>
</tbody>
and then in the controller,
$scope.showLast24Hrs = function(receivedTime){
if($scope.isLast24Hours) {
return receivedTime < 200; // Write your less than 24 hours check here
}
return true;
}
I wrote this demo on Codepen. Hope that helps.
I am learning Protractor and am trying to sendKeys in an input field in the angularjs.org page but I am getting this error:
NoSuchElementError: No element found using locator:
By.model("projectList.search")
Here is my code:
describe ("Search list", function() {
it ("should search for jQuery and display 1 result", function() {
browser.get("https://angularjs.org/");
element(by.model("projectList.search")).sendKeys("jQuery");
});
});
I tried using by.id and got the same error. I am assuming that this is caused because element is not visible yet. When I add browser.pause() and go step by step (slowly), the test passes. What is the best way to solve this?
Related HTML from angularjs.org
<input type="text" ng-model="projectList.search" class="search-query" id="projects_search"
placeholder="Search">
<table>
<thead>
<tr>
<th>Project</th>
<th>Description</th>
<th><i class="icon-plus-sign"></i></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="project in projectList.projects | filter:projectList.search | orderBy:'name'">
<td><a ng-href="{{project.site}}" target="_blank">{{project.name}}</a></td>
<td>{{project.description}}</td>
<td>
<a ng-href="#/edit/{{project.$id}}"><i class="icon-pencil"></i></a>
</td>
</tr>
</tbody>
</table>
I managed to find a small library called waitReady.js and it has solved my problem. Here is my final code,
require './waitReady.js')
var searchBtnElm = element(by.model('projectList.search'));
searchBtnElm.waitReady().then(function() {
searchBtnElm.sendKeys("myText");
});
You can try something like that :
var elementSelector = by.model("projectList.search");
browser.driver.isElementPresent(elementSelector).then(function(isPresent){
element(elementSelector).sendKeys("jQuery");
});
See protractor docs for more usefull functions
Is waitReady.js really works for you ?
Have tried to use it to click on stale elements but sometimes anyway exceptions occurs.
Have written function to click on element:
function clickWait(element) {
(element).waitReady().then(function () {
return element.click();
});
};
And invoke it like that:
clickWait(element);
framework: jasmine2
I would like to make an option for showing inactive users by checking a button.
Here is the users array:
$scope.users = [
{firstname: 'Paul', inactive: true},
{firstname: 'Mark', inactive: false},
{firstname: 'Maggie', inactive: false},
{firstname: 'Lucy', inactive: true}
];
And the table to display it:
<table>
<thead>
<th>Firstname</th>
<th>Activity</th>
</thead>
<tbody>
<tr ng-repeat="user in users | filter: ??">
<td>{{user.firstname}}</td>
<td>{{user.inactive}}</td>
</tr>
</body>
</table>
<input type="checkbox" ng-click="showInact()">Show inactives
I'm learning AngularJS, I didn't found an interesting way to do that. Can you help me finding a solution?
Thanks :)
Just do this way:
1) At you controller:
$scope.showInactive = false;
$scope.filterInact = function(item)
{
return item.inactive === $scope.showInactive;
};
$scope.showInact = function() {
$scope.showInactive = !$scope.showInactive;
}
2) Setup the filter:
<tr ng-repeat="user in users | filter:filterInact">
<td>{{user.firstname}}</td>
<td>{{user.inactive}}</td>
</tr>
I personally like using a filter function to filter data. This approach is flexible and can easily interact with your other form variables. From the angular docs, the filter expression can be a:
function(value, index): A predicate function can be used to write
arbitrary filters. The function is called for each element of array.
The final result is an array of those elements that the predicate
returned true for.
So an example filter function might look like this:
$scope.filterFunc = function (user) {
//if the checkbox is checked show everyone, else only those that aren't inactive
return $scope.showInactives || !user.inactive;
};
And the HTML would be changed to accommodate the filter function. Specifically, I'm binding the checkbox to a $scope variable ($scope.showInactives) that the filterFunc function uses in its logic. And of course the ng-repeat is using the function called filterFunc.
<input type="checkbox" ng-model="showInactives"/>Show inactive users
<br/>
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Activity</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users | filter:filterFunc">
<td>{{user.firstname}}</td>
<td>{{user.inactive}}</td>
</tr>
</tbody>
</table>
And if you need any other convoluted logic, the filter function allows you a lot of freedom. The only thing it needs to return is a boolean (true or false).
Demo.
Unrelated to filtering, I also had to fix the table's HTML by putting the <th> inside a table row <tr>.
Easiest Way !! You can set value of filter on click event.
<tr ng-repeat="user in users | filter:filters">
<td>{{user.firstname}}</td>
<td>{{user.inactive}}</td>
</tr>
on click filter set to check box
<input type="checkbox" ng-click="filters.inactive = true">
First, You need to set controller name instade of "myCtrl.js" whatever your controller name.