How to call angularjs function while adding data to a json array? - angularjs

As I have mentioned in this question, I have a function that returns a different text based on an input.
This is working fine when I use it in static text areas, like below:
<td>{{('input_text'|fnName:dataObject:'query_param')}}</td>
How can I call this function while I am assigning data to a json object? Originally the input_text is added to the json, but I need to run a lookup and replace the text.
EDIT: The json object is assigned to a dropdown, but I doubt if I will be able to call my function in the dropdown attributes.
p.s. The content in dataObject could change while using the application; so the function should be invoked with the latest data.

Try setting the filter's $stateful property to true.
https://stackoverflow.com/a/35563980/4028303
This should make the filter re-run upon digest cycles, even if the left-side data being passed in hasn't changed.

Related

Why does AngularJS select all options instead of just the one clicked?

In my AngularJS app I have an HTML form with some option elements, and when I change one option the other options also get changed. After reloading the page I can change individual values.
A function changeVariant is called on change and the values will be changed.
What causes this and how can I fix it?
This is the angularjs feature 2 way binding. if a scope variable is changed in controller the reference (object reference) value will also get changed in corresponding html pages. to restrict this you have to break the object reference. please check the below url to get some idea.
https://www.bennadel.com/blog/2863-breaking-direct-object-references-at-cache-boundaries-in-angularjs.htm

Possible to use watch in filter function angularjs

I want to extend one filter function which used to enable/disable a button.
I have an array and am receiving a variable (serviceVariable) from a service. I am looping through this array to check whether this service value is available or not. if match, then filter function should return true to disable a button.
But service takes some time to update this serviceVariable, so on page load it is not matching with any of array variables. but after few seconds am receiving the serviceVariable with value.
can we use watch here? so that when my serviceVariable get update, I can check with new value.
or any other way?
You should try invoking filter from javascript, means from controller or service in the service call response.
So the thing is you need to call your filter asynchronously (i.e after making service call) in your js file. So call your filter in your js file like the following syntax,
$scope.isButtonShown = $filter('filtername')(arg1,arg2); // return true or false from filter which would dynamically show or hide the button
Hope this helps
For references :
How to use a filter in a controller?
How to use a filter in javascript instead of the Html

ng-table , getData called more than once, why?

For some reason when getData uses angular resource to bring the data it is being called twice, causing the resource to do it REST request twice too <--- bad...
Any idea why and how to solve it?
Here a working testcase/plunker example that recreates this scenario (look at the browser console - "getData being called...." displayed twice ) b.t.w as you can see I'm not really using the resource to bring real data, just to demonstrate the scenario, In my real app I do use the resource to bring real data and its being called twice just like in this example,
Thanks ahead
After looking into the src of the ng-table I noticed the following
$scope.$watch('params.$params', function(params) {
$scope.params.settings().$scope = $scope;
$scope.params.reload();
}, true);
Which means that the tables calls it 'getData' on count/filter/group/groupBy/page/sorting
which explains the behavior I was seeing.
When you call params.count(...) you ask ng-table to refresh data as you change page size. That's why you have two get-data calls.
If you don't want to have paging, then remove calls params.count and params.total.
If you need paging, then set page size and do not change it in getData.
This happened to me with a weird reason. getData get called twice on init (first load) only. changing page or sorting didn't call getData twice. The reason was that at init the ng-table directive was hidden in the template file.
Thank #Alexander Vasilyev. I understood my problem as you said. I want to explain a litte more here. In fact, the object "params" is the object configuration the table ng-table, then if "params" changed (ex: count or a property of the object), ng-table will invoke function getData() to refresh table.
In my case, I want to get information in the object "params" and change it but I dont want to refresh ng-table. I did it by cloning object "params" et work his object copied. Clone the object in JS with jQuery :
var resultParams = jQuery.extend(true, {}, params.$params);
And then, I will work on the object resultParams instead of "params" original.

In Angular.js need to remove a specific string

I need to remove all br tags from the json data I am working with before rendering to the template.
Im wondering if there is a pre-existing angular directive which could be used for this, or if there is a way to do it by creating a custom filter. The documantation on filters doesnt seem to be easily adaptable to this usecase.
Do you need to remove <br>s from a specific object property like remove HTML from a string (in JSON response) or do you need to remove them from all properties of the JSON object?
You should be able to just put some JavaScript code into a custom filter (the custom filter would return either a modified JSON object or a new object), and then call that filter from your HTML when you want to display the JSON.
If you are displaying different parts of your JSON object using different ng-repeat, ng-show, etc. directives, it might make more sense to filter the JSON once in your controller, then use the filtered version in the HTML/template. A little more information about your actual use case would help.

ExtJS: ajax based search form

I have an Ext.form.Panel that calls a PHP page by passing search parameters. The PHP page executes a query based on those params and returns a JSON structure. In the form-success handler I would like to get the JSON, build a store and fill a grid.
How can I do it using ajax? If I use Ext.form.panel submit() it always invoke onFailure because it does not find [{success:val,message:msg}]. Which is the correct way to build a form that gets back a JSON string?
Why don't you just have your search panel call a load() action on grid's JsonStore? A lot easier than manually flling the store from JSON string.

Resources