angularjs-ng-repeat | 易学教程

How do I only show an element if nested ng-repeat is not empty?

阅读更多关于 How do I only show an element if nested ng-repeat is not empty?

问题 I have a List of lists, created with a nested ng-repeat. Each outer ng-repeat contains a div with the label of its inner list (eg: "Group A"). I'm now trying to create a way to avoid showing this label if the inner list is empty due to filtering(Applied by an input searchtext) Here is a plunker explaining my issue and my attempted solution : Plnkr Having a 'heavy' function like isGroupEmpty seems extremely cumbersome - Is there any way to do this in a much simpler fashion? I was toying with

Using ng-repeat with markers in ngMap

阅读更多关于 Using ng-repeat with markers in ngMap

I want to use ngMap to add Google Maps to my app. The demos are "static" in the sense that they have only hard coded HTML. I want my code to be "dynamic" in the sense that it will periodically ask a server to look in its database and return me a bunch of coordinates to plot, which will change with time. I hope that that is clear; if not, please ask for more detail. I modified the ngmap markers demo to generate some random lat/long coordinates every two seconds (rather than going to my server, as my final app will). Please see the Plunk . There are no errors in the console, and it seems that

jQuery not working with ng-repeat results

阅读更多关于 jQuery not working with ng-repeat results

I am using ng-repeat to build an accordion using jQuery and TB. For some reason, this is working perfectly when hardcoded but fails to trigger on click when inside of the ng-repeat directive. I was thinking that the issue is from jQuery not binding elements loaded in after the fact. So, I figured that instead of loading the script on page load, it would be better to load the function on .success when the data is returned. Unfortunately, I cannot figure out how to make this work. Test page : http://staging.converge.io/test-json Controller : function FetchCtrl($scope, $http, $templateCache) {

AngularJS - ng-repeat to assign/generate a new unique ID

阅读更多关于 AngularJS - ng-repeat to assign/generate a new unique ID

Im using a simple ng-repeat to generate a list of countries. Within each list is a hidden row/div that can be expanded and collapsed. The issue that i am facing, is that before i introduced Angular into my application, i manually hard-coded the element's ID, for example: <li data-show="#country1"> {{country.name}} has population of {{country.population}} <div id="country1"> <p>Expand/collapse content </div> </li> <li data-show="#country2"> {{country.name}} has population of {{country.population}} <div id="country2"> <p>Expand/collapse content </div> </li> <li data-show="#country3"> {{country

Angularjs OrderBy on ng-repeat doesn't work

阅读更多关于 Angularjs OrderBy on ng-repeat doesn't work

I'm trying to use AngularJS for my first project (a tournaments manager) and the orderBy filter on ng-repeat doesn't work :( I have read all the documentation about that , but nothing to do :/ So, I have vars defined on $scope like that : $scope.order_item = "count_win"; $scope.order_reverse = false; $scope.teams = { 100 : { id: 100, name: "XXX", count_win: 1, count_loose: 2, goal_average: 1, }, 200 : { id: 200, name: "XXX", count_win: 1, count_loose: 2, goal_average: 1, }, [...] }; Now, on my view i'm trying to reorder (first with only one order item) but never work... <tr ng-repeat="team in

How to $watch changes on models created by ng-repeat?

阅读更多关于 How to $watch changes on models created by ng-repeat?

Consider this Plnkr for example. I don't know how many members of fooCollection will be created beforehand. So I don't know how many bar models are going to exist. But I know they are going to be angular models, and I know where they are going to be. How do I do a $watch on these? I need to do that because I need to trigger behavior when a bar model is changed. Watching the fooCollection itself is not enough, the $watch listener does not fire when a bar is changed. Relevant html: <body ng-controller="testCtrl"> <div ng-repeat="(fooKey, foo) in fooCollection"> Tell me your name: <input ng-model

angularjs ng-style: background-image isn't working

阅读更多关于 angularjs ng-style: background-image isn't working

I'm trying to apply a background image to a div by using the angular ng-style ( I tried a custom directive before with the same behaviour ), but it doesn't seem to be working. <nav class="navigation-grid-container" data-ng-class="{ bigger: isNavActive == true }" data-ng-controller="NavigationCtrl" data-ng-mouseenter="isNavActive = true; $parent.isNavActive = true" data-ng-mouseleave="isNavActive = false; $parent.isNavActive = false" data-ng-show="$parent.navInvisible == false" data-ng-animate="'fade'" ng-cloak> <ul class="navigation-container unstyled clearfix"> <li class="navigation-item

AngularJS: ng-repeat track by $index inside nested loops

阅读更多关于 AngularJS: ng-repeat track by $index inside nested loops

问题 I need a second $index for my nested ng-repeat loop. How and where should I put it? AngularJS site says Creating aliases for these properties is possible with ngInit. This may be useful when, for instance, nesting ngRepeats. <div ng-repeat="person in persons track by $index"> <div ng-repeat="something in array track by $index2">  If I use $index again, it seems to work but I am not sure this is the right thing? I am sure there is an easy and

Do bindings nested inside of a lazy one-time ng-repeat binding bind just once?

阅读更多关于 Do bindings nested inside of a lazy one-time ng-repeat binding bind just once?

My understand is that in the following code, both bindings will lazily bind only once : <li ng-repeat="item in ::items">{{::item.name}}</li> However, in the following case will {{item.name}} be updated every digest? <li ng-repeat="item in ::items">{{item.name}}</li> And how does one-time binding effect nested ng-repeat s ? <li ng-repeat="item in ::items"> <span ng-repeat="thing in item.things">{{thing.name}}</span> </li> Scenario 1: <li ng-repeat="item in ::items">{{::item.name}}</li> Both expressions will be one-time bound. Adding an item or changing an existing item's name will not be

AngularJS append HTML in the ng-repeat element

阅读更多关于 AngularJS append HTML in the ng-repeat element

Using AngularJS I need to append HTML to the elements of ng-repeat, using the selector: 'objectMapParent-' + post._id <div ng-repeat="post in posts"> <div id="{{ 'objectMapParent-' + post._id }}"> <h5 style="color:blue; margin-top: 3px;">{{post.title}}</h5> </div> </div> so I created a loop to loop through the elements of the posts array, where for each element I call the function: createElement $scope.posts = [{ _id: "1", title: "map of london" }, { _id: "2", title: "map of brazil" }, { _id: "3", title: "map of usa" }]; $scope.posts.forEach(function(post) { // console.log(post); createElement