I have created simple angularJS app.I used ng-repeat to bind data to DOM
<div class="row folder" ng-repeat="f in viewModel.folders">
<div>{{f.name}}</div>
</div>
so weird ,my data not bind to DOM until I click any button with "ng-click" action.
I do not know why ?
I resolved myself by call $scope.apply() at the end.
Related
I'm very very new to Angular JS and have the following requirement:
I have an ng-repeat as shown below:
<div class="panel" ng-repeat="(appname, value) in chart.accordionData" style="margin-top: 0;">
<div class="accordion collapsed" data-parent="#accordion1"
data-toggle="collapse"
data-target="#{{appname.replace(' ','')}}">
<div class="accordion-head" initial-select index="{{$index}}">
<div class="arrow chevron"></div>
<h4><i></i>{{appname}}</h4>
</div>
</div>
<div class="accordion-body collapse" id="{{appname.replace(' ','')}}">
<p class="highlightable" >
Some data
</p>
</div>
</div>
The data in this ng-repeat comes from the server.
So the problem statement I have is to perform a click trigger on the first element under ng-repeat, .accordion-head so that the first item in the list is always open. I tried various approaches of putting $watch etc. but when the number of items in the list are same, then the trigger doesn't fire.
(the first item in list has to be clicked even when new data is loaded)
I thought of writing a directive initial-select and perform click based on index but that happens only once. I really need an experts advice.
Any solutions?
I think the simplest option is to use data-ng-init="collapse = !$first;".
Another option:
Have you used Angular UI Bootstrap? Also, are you using $http or $resource to get data from the server?
If you use $resource, you can set a variable on the success callback (interceptor response) to open=true. Then, you can either bind this variable to Angular UI Bootstrap is-open attribute or to your data-toggle. Also, with $resource you can set data-ng-if="chart.accordionData.$resolved" (or chart.$resolved depending on your setup), which is nice.
You can use a watch to watch the array contents.
Check out the following fiddle:
http://jsfiddle.net/akonchady/w0qdsen7/3/
I have used a variable to keep track when the array content changes since directly watching the array will be more memory intensive.
Here is the main code that watches the variable:
$scope.$watch('arrModified', function(newValue, oldValue) {
if(newValue) { //array is modified
//Trigger ng-repeat div click
setTimeout(function() {
$('.item:first').trigger('click');
$scope.arrModified = false;
$scope.$digest();
}, 0);
}
});
I would like to add an iframe to a page when certain links are clicked and remove it when other mouse events happen on the page. From what I can see, it seems that using an AngularJS directive would be the best way to do this. What I'm not sure about is what is the best way to format the directive. I'm thinking of making the directive at the attribute level...something like this:
<div myIframeDirective></div>
What I'm not sure of is the best way of removing/adding the directive contents (an iframe and a header above it) when various click events happen on the main page. Not looking for anyone to write the code for me...just looking for examples of how this can be best accomplished.
You should be using ng-if.
<iframe src="http://www.example.com/" ng-if="showIframe"></iframe>
<button ng-click="showIframe = !showIframe">Click me to show/hide the iframe</button>
Here's a working example:
var app = angular.module('app', []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<iframe src="http://www.example.com/" ng-if="showIframe"></iframe>
<button ng-click="showIframe = !showIframe">Click me to show/hide the iframe</button>
</div>
In Angular, ng-if will remove the iframe from the DOM if it is false.
This means the URL will NOT be requested until ng-if is true.
<iframe ng-if="frameDisplayed" ng-src="{{src}}"></iframe>
And use the link
Toggle
Then in your controller, you can control what your iframe display:
$scope.src = 'https://angularjs.org';
I'm using the kendo-angular tooltip directive with ng-repeat like so:
<div ng-repeat="thing in things"
kendo-tooltip="tooltip"
k-options="thingTooltipModel"
data-thingname="{{thing.name}}>
</div>
<script type="text/x-kendo-template" id="thingTooltipTemplate">
<span>Thing Name: #= target.data('thingname') #</span>
</script>
As stated in the kendo-angular documentation, the kendo widget isn't notified when I update things, so the tooltip continues to display the initial data. Is there a way to manually tell kendo to re-read the data?
In the controller's method Maybe you should put $scope.$apply(function(){//Your CODE for the Update})
You can use k-rebind:
<div ng-repeat="thing in things"
kendo-tooltip="tooltip"
k-options="thingTooltipModel"
k-rebind="thing"
data-thingname="{{thing.name}}>
</div>
That will destroy the old widget and create a new one.
I've built a directive <playlist> which calls my custom service to return and then display a list of videos. So far so good. However, I don't want this directive to render and call my API until the user clicks on a link elsewhere on the page.
How can I have a link outside of the directive trigger the rendering of the <playlist> item? I looked for some sort of onShow event to no avail.
You can use the ng-if directive to keep your directive out of the DOM until the link is clicked. So your HTML would looks something like this:
<div ng-if="showPlaylist">
<playlist />
</div>
Then you would just set showPlaylist to true when you want it to show/render.
I was able to figure this out based on dnc253's feedback.
Toggle Playlist
<div ng-if="showPlaylist != undefined">
<playlist ng-show="showPlaylist"></playlist>
</div>
On initial page load <playlist> is hidden and not rendered. Clicking the link renders <playlist>. Subsequent clicks toggle the ng-show attribute and so the scope is not reset.
i got the following structure:
<div directiveA>
<a href="" directiveB>
</div>
Both directives got an onclick event. The problem is, that if a click on directiveB is performed, a click on directiveA is triggered as well.
How can i prevent this?
Thanks
In the directiveB on the click directive do this this
ng-click=doSomething();$event.stopPropagation()
There is an $event object available for all DOM events supported by angular.