I'm using md-autocomplete to show results of an api query. Attribute md-items is iterating over a promise: item in getItems(searchText).
This is working well, and using the cache subsequent uses of the same search text return immediately with the same results.
But I need to be able to clear the cache at some points, when other search parameters change. How can I do this? By accessing the md-autocomplete controller perhaps? Although that seems non-standard and I'm not sure how.
As of version 1.0.5 of angular-material this isn't possible. I didn't find any acceptable workarounds, so I'm just disabling the cache with md-no-cache="true".
I've logged an issue for this on the angular-material project including a suggestion on how it could work.
It is definitely possible to reset the md-no-cache attribute programmatically anytime on your md-autocomplete directive.
If you have a boolean variable on your controller, let's say:
$scope.noCacheResults = false;
Then on your directive you can bind this variable to the md-no-cache attribute:
<md-autocomplete ...
md-no-cache="noCacheResults">
</md-autocomplete>
Like this, whenever your search parameters change you can set the $scope.noCacheResults to true or false depending whether you want to keep caching the query results or not.
Something that worked for me. Put an ng-if on your autocomplete. Then, in the code that changes the value of the other fields affecting this field, set that value to false, and then within a timeout, set it to true again. This will effectively remove the item from the DOM and put it back all nice and new with no cache.
Related
I'm wrestling with the way angular watches arrays. I have the following markup:
<map name="theMap" center="{{mapInfo.center.toUrlValue()}}" zoom="{{mapInfo.zoom}}" on-dragend="dragEnd()" on-zoom_changed="zoomChanged()">
<marker ng-repeat="pin in pins() track by pin.iconKey()" position="{{pin.latitude}}, {{pin.longitude}}" title="{{pin.streetAddress}}" pinindex="{{$index}}" on-click="click()"
icon="{{pin.icon()}}"></marker>
</map>
Each individual pin returned by pins() has a number of properties, sub-properties, etc. One of those sub-properties controls the marker color. When that subproperty changes I want the UI to update.
Because ng-repeat appears to $watch based on simply changes to the collection it's not obvious how to achieve that. I thought that my tracking function, iconKey(), would do it because it returns a different value depending upon the subproperty's value. But that didn't work.
One other thing: the subproperty gets changed in the callback from an $interval that runs under a directive. I mention this because, in an earlier post, someone thought that there might be a context/scope problem.
However, even when I make the change in an event listener within the UI's controller (where the event is raised within the "success" clause of the $interval callback) it still doesn't work.
That's why I think the problem is just angular not noticing the change in iconKey(); it's acting like all it $watches for ng-repeat is the array's length. Which doesn't change when the subproperty changes.
Update
I've created a plunker to demonstrate the issue I'm facing. You can find it at http://plnkr.co/edit/50idft4qaxqw1CduYkOd
It's a cut down version of the app I'm building, but it contains the essential elements (e.g., a data context service to hold information about the map pins and an $interval service to toggle the subproperty of one of the pin array elements).
You start the update cycle by clicking Start in the menu bar (you may want to drag the map down slightly to put both pins into full view). It should toggle the color of each pin, alternatively, 5 times each, once every 2 seconds. It does this by toggling the value of the isDirty property of the pin object in a listener defined in the controller. The event is raised by the $interval service.
If you break on line 22 during the test cycle you'll see the pin's icon being returned. So something within angular is calling for the information...but the pin color doesn't change.
I look forward to someone quickly pointing out the bone-headed mistake that has nothing to do with any of my theories :). Apologies in advance for whatever blinders I'm wearing.
Update 2
After checking out the code snippet in the response I simplified my plnkr and demonstrated that angular is, in fact, updating the UI when a subproperty changes. So this appears to be a limitation or bug in ng-map.
What you are missing here is the concept of array and function your function pins() passes an array and that array is been bound with ng-repeat. But the brutal fact here is that no matter what that array is never changed, because you do not have ANY reference to that array hence the rg-repeat will always remain as is...
I'll suggest to try get the array be referenced two ways to do that
ng-init="pinsArray = pins()"
and second inside controller
$scope.pinsArray = $scope.pins()
then make changes to $scope.pinsArray inside controller
ng-repeat will be changed to
ng-repeat="pin in pinsArray"
also read about filters I am guessing that's what you where trying to do with "track by"
hope this helps..
Edit: different story with ngMap markers
seems like it doesn't watch sub-property.
so here's a work around
add following statement to you update the pinsArray after making changes to its properties.
pinsArray = angular.copy(pinsArray);
the solved plnkr example:
http://plnkr.co/edit/EnW1RjE9v47nDpynAZLK?p=preview
I´m trying to find a good way to use Baconjs together with Angularjs in conjuctions with Angular-Bacon.
Now digesting from Bacon to the Angular scope works perfectly fine but I´m stumbling with Angular-Bacons $scope.$watchAsProperty(property) within Angulars ng-repeat:
Let´s say I have the Angular scope $scope.databaserecords and render it out with:
<div ng-repeat="record in databaserecords">
Each of the records has a record.checked property and I want to handle all checked records together in one Bacon stream, for example to add a certain tag to all records at once.
At this point using $scope.$watchAsProperty(databaserecords) I get no Bacon events when checking or unchecking certain records, so how could I accomplish to receive these changes back in Bacon?
I might also mention, that using $scope.$watchAsProperty(property) out of ng-repeat, for example for input fields, works well without any problem.
Thanks for your help! :)
If I've understood correctly, your actual databaserecords remains the same throughout the scope, so you'll need to invoke $watchAsProperty with the objectEquality argument set to true:
$scope.$watchAsProperty("databaserecords", true)
By default angular opts to compare objects with a simple object equality check. In your case the list object remains the same, so a deeper check is necessary. This is already implemented in angular-bacon but it seems I've omitted it from the docs.
I have used switch-toggle inside ng-repeat. I don't know how to set default value to ng-model when you have multiple switch-toggle in your form and on form submit you need to have all the values. I am very much new to angular world and here is the Example In this example on form load the default value for switch-toggle is shown as "OFF". And if I submit form without making any change to the switch-toggle and check in browser console you can see empty model array. And on making some changes then I get the appropriate values.
So, how can I get all the values of the switch-toggle irrespective I make changes or not. As far as my angularJS knowledge is concern I guess it is related to its model. But how to do it in this case I feel I am lost.
This i believe should be model driven. You should intialize your switchModel, something like this
$scope.switchModel = {1:false,2:true,3:false };
instead of {}
I am using icefaces 1.8.2 and i have a HtmlBooleanCheckbox on my page that I need to uncheck when certain circumstances are met.
the checkbox on the page is like this
<ice:selectBooleanCheckbox id="accepttermscheckbox"
binding="#{managedBean.termsAgreement}"
validator="#{managedBean.validateAgreement}">
</ice:selectBooleanCheckbox>
and the binded object is a property of the managed bean with proper getter and setter
private HtmlSelectBooleanCheckbox termsAgreement;
i can check the checkbox in code, validator works fine and all the stuff i do with it are ok too but I just cant find a way to uncheck it on the server side.
I tried:
termsAgreement.setValue(Boolean.FALSE)
termsAgreement.setValue(null)
termsAgreement.setSelected(false)
but nothing works. Even if I debug it it shows value = null but when the page renders it still appears checked.
Once I check it I just cant get it unchecked unless I click it manually on the page.
funny thing is that
termsAgreement.setValue(Boolean.TRUE)
works fine.
Anyone any tips how I can uncheck it server side on the binded object?
Thank you in advance for help.
You are facing a common issue faced by ICEfaces/JSF developers.
First of all, you need to understand how JSF lifecycle works.
Following is a good article to read.
http://www.ibm.com/developerworks/library/j-jsf2/
For your case, bind a value to <ice:selectBooleanCheckbox>.
For example value="#{managedBean.termsAgreed}".
<ice:selectBooleanCheckbox id="accepttermscheckbox"
binding="#{managedBean.termsAgreement}"
validator="#{managedBean.validateAgreement}"
value="#{managedBean.termsAgreed}">
</ice:selectBooleanCheckbox>
Do not try to change the value from the component. Always change value from the value binding. In this example, you must change the value termsAgreed.
If your action/actionListener is not immediate, i.e `immediate="false", which is the default value, then changing the value in server-side will check/uncheck checkbox component.
If you are using immediate="true", then you must call resetValue() method in your component, HtmlSelectBooleanCheckbox:
termsAgreement.resetValue();
Ideally, you shouldn't call setValue() methods in components. You will understand it when you understand the JSF lifecycle.
Hope this will help!
I want to let the user crop an image, I found this JQuery plugin - http://deepliquid.com/content/Jcrop.html
I tried to use it with Angular-ui's Jquery passthrough option, adding the ui-jq=Jcrop directive to the <img>
The problem is that If I use ng-src to dynamically change the image it doesn't work and nothing is seen. If I change it to src and put a static url I can see the image and Jcrop.
how can I fix that ?
also, how can I listen to Jcrop's callbacks to know what is the user's selection ?
is there a better / simpler way to add image cropping functionality to AngularJS ?
Here is my solution:
I've written a directive that create img element and apply plugin on it. When src is changed, this img is removed and content that was created by plugin is also destroyed and then re-created new img with new src and again applied plugin on it.
Also provided 'selected' callback to be able to get coordinated that were selected (wrapped in $apply so you can modify your scope values in it).
Check my solution at Plunker
I've built a demo using AngularJS and Jcrop here:
Demo: https://coolaj86.github.com/angular-image-crop
On Github: https://github.com/coolaj86/angular-image-crop
You can leverage ui-event to create an event definition object with the keys being the event names and the values being the callbacks. Or you can simply pass these events as options to Jcrop (according to the documentation)
Finally, there is a new update coming to ui-jq that lets you add ui-refresh which is an expression to be watched to re-trigger the plugin.
Theoretically you should be able to do
<img ui-jq="Jcrop"
ui-options="{onSelect:myCallback}"
ui-event="{onChange:'myCallback($event)'}"
ui-refresh="imgSrc"
ng-src="imgSrc" />
Note: this simply re-fires the passthrough again, and doesn't automatically mean this will fix the problem or that the plugin will behave properly when re-initialized
We're still working on a good way to allow you to trigger different events at different times.