I have a situation like I have to load infinite number of items to table. These information is coming from API. Currently its showing 10 records. I am trying to implement http://jsfiddle.net/U7Bz9/3126/. In my code ,
<div class="page page-table" id="MainWrap" data-ng controller="Ctrl1" >
// where all html codes are written
</div>
But in above given link they have not used controller. Controller is not passing to js. How to implement this?
Related
Use case: Using Angular, filter a list of dom nodes based on text match.
I have a list of dom nodes like so:
<input type="text" placeholder="Filter section">
<section>
<div>foo</div>
<div>bar</div>
<div>baz</div>
</section>
I'd like to use Angular to filter down to just "foo". The problem that I'm facing is any Angular example of filter assumes the HTML is outputted via ng-repeat. My situation is the list within <section> above is being looped from the server.
So my question is pretty simple and likely silly, but: how can you apply Angular's filter utility so that list of nodes can be filtered using the <input>?
No, there is no model here to apply the filter. So angular does not have an object to process.
You have 2 choices:
write yourself a directive that does this work
return the data as JSON and display it with ng-reapeat
I'm using twitter bootstrap with a popover and got a AngularJS scoped variable to appear correctly. The below works.
(data-content="{{notifications[0].user}} shared {{notifications[0].user_two}}'s records")
When I add the following
(data-content="<b>{{notifications[0].user}} shared {{notifications[0].user_two}}'s records</b>")
No errors show up, but all of the {{}} no longer render.
So I tried this as a test of sorts
(data-content="<div ng-repeat='item in notifications'>test {{item}} <br/><hr/></div>")
Much like the last example, I see the "test" but not the {{item}}. And the "test" only show s up once, even though the notifications had three elements. When I look at the DOM there's this
<div class="popover-content">
<div ng-repeat="item in notifications">you <br><hr></div>
</div>
I've also tried just creating a directive to iterate through the array and make the output I want, but my attempt to set data-content equal to a directive have been failures. The examples I've found elsewhere I'm confident would work, but I just wanted to confirm before I begin implementing something like this (http://tech.pro/tutorial/1360/bootstrap-popover-using-angularjs-compile-service) or (Html file as content in Bootstrap popover in AngularJS directive) that I'm not missing a straightforward fix to the problem I outlined above that would not require me creating a directive.
Edit:
Plunkr Url http://plnkr.co/edit/VZwax4X6WUxSpUTYUqIA?p=preview
html might be breaking it, try marking it as trusted html using $sce
How do you use $sce.trustAsHtml(string) to replicate ng-bind-html-unsafe in Angular 1.2+
$scope.html = '<ul><li>render me please</li></ul>';
$scope.trustedHtml = $sce.trustAsHtml($scope.html);
<button ... data-content="trustedHtml" ...> </button>
I would like to apologize that I couldn't provide any code snippet regarding this question, I am a newbie about AngularJS.
<div ng-repeat="item in list" ng-view></div>
Using the code above, would it be possible to render different template which would be dependent on item.type property. I was expecting a result like this:
item.type == "image" returning: <div><img src="'IMAGE_URI'"></div>
item.type == "text" returning: <div><p>TEXT</p></div>
As of now I have create a template html for the enumeration of item.type. Is this concern possible using AngularJS? I've recently learned that ng-view accompannied with ng-route.
I think one way you can do it is to use 'ng-if' to conditionally include html:
<div ng-repeat="item in list">
<div ng-if="item.type == 'image'><img src="'IMAGE_URI'"></div>
<div ng-if="item.type == 'text'><div><p>TEXT</p></div>
</div>
You can have only one ng-view,
take a look at this answer.
from the documentation for ng-view:
ngView is a directive that complements
the $route service by including the rendered
template of the current route into the main
layout (index.html) file.
Every time the current route changes,
the included view changes with it according
to the configuration of the $route service.
Requires the ngRoute module to be installed.
What you're looking for is ng-include, combined with ng-switch,
take a look at this answer on how to combine the two.
ng-include creates a new child scope, which in turn inherits from the controller.
have a look at this answer for more information about the topic.
I recently updated angular from 1.1.5 to 1.2.14.
Now the filters in the ng-repeats produce some unexpected behavior:
ng-repeat renders as normal
enter text into filter model input : ng-repeat does not filter
remove text from input and angular adds extra dom elements to the ng-repeat, basically repeating the ng-repeat. The array bound to the ng-repeat does not change though.
repeating steps 2 and 3 causes more elements to be added
I have tried to recreate this in PLUNKR and it works fine. Any idea what could be causing this?
code:
<input type="text" data-ng-model="query" >
<div class="default-add" data-ng-repeat="array in arrays.arrays | orderBy:'name' | filter:{name: query}">
<div class="default-add-image">
<h1>{{array.title}}</h1>
</div>
</div>
The data is valid json, I have tested with mock data and have the same error.
Thanks
Removing the NG-REPEAT from the repeated element and adding it to a parent container solved it.
If it is running in Plunker fine, then most likely the problem lies in your code. Is this a custom filter? If yes, I would start looking there. If not, then I would check if it works properly on artificial data (thinking that the data might be the issue). If this does not work, then look at your data provider. If this works, then look into how you are processing the data.
I doubt that this is Angular's bug. I migrated from 1.0.7 to 1.2.x recently without such problem (there were few, but all fixed easily by following migration guidelines from Angular team).
Hope that helps!
I have a store webpage and I want to add product blocks when user scrolls down (by infinite scrolling).
Which method should I use to fetch data from server and add it to the dom?
I saw this fiddle for implementing infinite scrolling in angularjs (it runs a loadMore() function when user arrives to end of page), as mentioned above, blocks are store's product and every item should have different scope.
The problem is that I don't know how to structure data in a scope and adding more items to it by ajax requests in the loadMore() function.
My products template:
<section class="more-apps">
<h1>More recommendations</h1>
<div class="loadmore-these">
<!-- ajax requests will load more instances of these three templates -->
<div data-ng-include data-src="'products-template-1.html'"></div>
<div data-ng-include data-src="'products-template-2.html'"></div>
<div data-ng-include data-src="'products-template-3.html'"></div>
</div>
</section>
and every sub-template file is like this with some simple differences:
<section data-ng-repeat="i in [1,2,3,4]">
<h1 data-ng-bind-html="title"></h1>
<div data-ng-bind-html="about"></div>
</section>
Every product has different title and about variables in (it's own?) scope.
I suggest you go through the angularjs official tutorial (basically it's about what you want to do, list products from a webstore) , and specifically the step about $http and services :
http://docs.angularjs.org/tutorial/step_05
If you structure your service to download a range of products according to how much the user scrolled (as in the example you linked to) you should be set.