After doing most of my testing in Chrome, I have discovered my site is running like a dog in IE 11
After some investigation I am trying to use one time binding on my ng-repeats, however when I use the double colon syntax nothing renders on my page
Here is a snippet
<div data-ng-repeat="i in [1,2,3,4,5,6,7,8,9]">
<div id="Raiders{{$index + 1}}" ng-repeat="player in ::players | filter:{ Team:'Raiders', Group: $index + 1}">
<div style="white-space:nowrap">
<span ng-click="updateTeam(player)">{{::player.FullName}}</span>
<span class="statsFootball" ng-click="showTabDialog(player)"></span>
</div>
</div>
</div>
My only change has been to use :: (double colon) in my ng-repeat statement and also to print player.FullName
I am using Angular 1.5.8
I'm not sure why this doesn't work.
Related
I am working on a small AngularJS application. In one of the views, I have replaced some hard-coded html with data coming from a JSON file that I iterate through:
<class="actions-list">
<div ng-repeat="item in $ctrl.myCustomService.config.items"
ng-class="{'disabled': !item.isEanabled}"
class="actions-item"
ng-click="$ctrl.selectAction('{{item.action}}')">
{{item.name | translate }}
</div>
</div>
The problem is that, since this replacement, the function fired by ng-click, that used to be (hard-coded) ng-click="$ctrl.selectAction('register'); and so on, does not work anymore.
Why does that happen? How can I fix the problem?
You don't need quotes or {{ }} inside ng-click:
<class="actions-list">
<div ng-repeat="item in $ctrl.myCustomService.config.items"
ng-class="{'disabled': !item.isEanabled}"
class="actions-item"
ng-click="$ctrl.selectAction(item.action)">
{{item.name | translate }}
</div>
I'm working on a .NET MVC application that has some AngularJS pages in it. I'm trying to use Bootstrap UI Typeahead but it's not quite working properly.
If I start to type in the textbox the autocomplete popup opens with potential matches:
However, if I click on one of the matches nothing happens and the underlying angular model is not updated:
The really strange thing is that if I hit tab while the popup is open the first match will get selected and the angular model is updated appropriately:
This is the template I'm using:
<script type="text/ng-template" id="customTemplate.html">
<div class="search-result search-result--mos ng-scope" ng-if="matches.length > 0">
<ul>
<li ng-repeat="match in matches track by $index" class="search-result__item ng-scope uib-typeahead-match">
<div uib-typeahead-match match="match" index="$index" query="query" ng-bind-html="match.model.value"></div>
</li>
</ul>
</div>
This is the relevant front-end code:
<section class="mos intro" data-ng-controller="MosConverterController as vm">
<div>
<form ng-submit="GetCareers()" class="form form--mos">
<div class="form__row">
<div class="form__col form__col--half-plus">
<label for="MOS" class="form__label">MOS/Rate/Duty Title</label>
<input type="text" ng-model="vm.model.SearchTerm" uib-typeahead="career.value for career in vm.model.CareerResults | filter:$viewValue | limitTo:8" typeahead-popup-template-url="customTemplate.html" id="MOS" class="form__input--text" placeholder="Start Typing" name="MOS" required>
<div>Current Search Term: {{vm.model.SearchTerm}}</div>
<textarea>{{vm.model.CareerResults}}</textarea>
</div>
</div>
</form>
</div>
Here's our angular model. Note that we're using Typescript in this project:
import {MosConverterSearchResult} from "../models";
export class MosConverterModel implements Object {
SearchTerm: string = null;
CareerResults: MosConverterSearchResult[];
SelectedCareer: MosConverterSearchResult;
}
I followed the tutorial from the Angular Bootstrap documentation here for the "Custom popup templates for typeahead's dropdown" section but I can't figure out what I'm doing wrong. I'm sure it's something simple but I just can't figure it out. I should note that adding ng-click to the li element like they have in the tutorial doesn't fix the issue. I've tried it like this before:
<li ng-repeat="match in matches track by $index" class="search-result__item ng-scope uib-typeahead-match" ng-click="selectMatch($index)">
<div uib-typeahead-match match="match" index="$index" query="query" ng-bind-html="match.model.value"></div>
</li>
After banging my head against my desk for a couple of hours I figured out the issue was the ng-if in my template. The example in the tutorial link I posted above uses ng-show. ng-if destroys the DOM element and destroys its scope in the process. That's why nothing would happen when I clicked on an item from the list. Not sure why the tabbing would work though if this was indeed the case. If anyone knows please add a comment or better answer.
I am trying to show the value from my json files using ng-repeat in angular js but I am unable to do that.
This is my code which I am trying:
<div ng-repeat = "x in myWelcome.definition">
{{x.attributes[0].children[0].node_id}}
<hr>
</div>
I have tried this and it is working:
<!-- first attributes start -->
<div ng-repeat = "x in myWelcome.definition.attributes">
{{x.rm_attribute_name}}<hr>
<div ng-repeat="a in x.children">
<div ng-if ="a.attributes">
a: {{a.attributes[0].rm_attribute_name}}
<div ng-if= "a.attributes[0].children">
chld
</div>
</div>
</div>
</div>
<!-- second attributes end -->
I am trying to understand how this line is working {{a.attributes[0].rm_attribute_name}} why it is not working like this {{a.attributes1.rm_attribute_name}} this is confusing. How it is shwoing all the results when I am using 0 and index.
And my json file is here in the plunker:
Plunker link of json and code
So how can I iterate here using ng-repeat here this code:
{{myWelcome.definition.attributes[0]}}
is working how can I show this in my view using ng-repeat I need to show all the attributes and child using ng-repeat.
ng-repeat can be used in the following way:
<div ng-repeat = "(key,value) in myWelcome.definition.attributes">
Key:{{key}} and value :{{value}}
<hr>
</div>
OR you can Try this:
<div ng-repeat = "x in myWelcome.definition.attributes">
<div ng-repeat="a in x.children">
a:{{a.node_id}}
</div>
</div>
Edited Plunker
I can see you are trying to implement ng-if and ng-repeat for your json file. You need to understand how ng-repeat works you can always check the index of you array using {{$index}}. So for your kind of problem I think this is the solution you should try.
<!-- first attributes start -->
<div ng-repeat = "x in myWelcome.definition.attributes">
{{x.rm_attribute_name}}<hr>
<div ng-repeat="a in x.children">
{{$index}}
<div ng-if ="a.attributes">
<div ng-repeat="b in a.attributes">
<hr>
{{b.children.length}}
<div ng-if="b.children.length > 1">
If the array is more than 1 please do the magic here
</div>
</div>
<div ng-if= "a.attributes[0].children">
chld
</div>
</div>
</div>
</div>
<!-- second attributes end -->
You can always see the indexes using {{$index}} and you should always use .length to check if it has more than 1 value. This way you can achieve what you want and you should also learn something about arrays in javascript and what is the differnece between dot and bracket. Please read this http://www.dev-archive.net/articles/js-dot-notation/. I think you should learn the basics of javascript.
I cannot get the tooltip display translated value (using angular translate) from an object in ng-repeat loop:
<div ng-repeat="type in types">
<div>
<span ng-bind-html="type.icon"></span>
<label style="font-size: 20px;">{{type.nameNormal | translate}}</label>
<i class="fa fa-info-circle"
tooltip-class="custom-tooltip"
uib-tooltip="{{'type.descriptionNormal' | translate}}"
tooltip-placement="bottom"></i>
<hr class="hr-no-background">
</div>
</div>
P.S. UI Bootstrap version: 0.13.4
Angular: 1.4.4
if you are using 0.13.4 of ui bootstrap the directives are not prefixed with the 'uib' prefix yet
see http://angular-ui.github.io/bootstrap/versioned-docs/0.13.4/#/tooltip for details
Ok, for those, who will face equal problem in the future: I just didn't put any value into my translation file for the descriptionNormal.
Example:
type.descriptionNormal = "DESCRIPTION"
Translation file:
"DESCRIPTION": ""
This was the case. Now everything work fine.
So it seams the tooltip doesn't get displayed if the value is empty.
I've a situation where I want to display an error message on the page when my modal don't have any records to show. This could be on the initial load or after applying some filter criteria on the page.
I'm using ng-if to check the count of records on the result set after applying the filter, that is why when my page initially loads as there is no data in the filtered result rest it is showing up the error message first and then later it is showing the data.
Any insight would be highly appreciated
prod.skulist is my modal.
<ul class="prd-list">
<li ng-repeat=" p in filtered =(prod.skulist | categoryFilter:prod.selectedFormat :prod.selectedRating) | filter :priceRange" id=" {{p.sku}}">
<figure class="prd-img" ng-click="wrapCtrl.showProdDetils(p.sku,prod.catName)">
<div style="background-image: url({{wrapCtrl.imageLocation+p.image}}); background-repeat: no-repeat;"></div>
<figcaption class="prd-nam f8">{{p.title}}</figcaption>
<span class="new-item" ng-show="{{p.isnew}}"><img src="Content/images/new.png" /></span>
<span class="new-item" ng-show="wrapCtrl.compareStreetDate(p.streetdate)"><img src="/Content/images/coming-soon.png" /></span>
</figure>
<div class="prd-price f5">
{{p.currentprice | currency}}<span class="sales" ng-show="{{p.onsale}}">ON SALE</span>
<span class="cart-btn" ng-click="wrapCtrl.addCart($event)"></span>
<div class="inactive-cart-btn" ng-show="wrapCtrl.compareStreetDate(p.streetdate)"></div>
</div>
</li>
</ul>
<div ng-if="(filtered | filter :priceRange).length ==0" class="error-box">
<div class=" wrp"><span class="error-head">I hate when this happens</span></div>
<div class="wrp error-message">
<span class="f9 pad-top">It looks like I don't have exactly what you are looking for.</span>
<span class="f9 pad-bot">try adjusting your filters to see more</span>
</div>
</div>
I ran into a similar situation and found an ugly, though working solution by using the $timeout service. In your case you would have a scope variable, lets call it loadTimeGiven = false and after the $timeout you set it to true. Then simply do
ng-if="(filtered | filter :priceRange).length ==0 && loadTimeGiven"
Alternatively you could set loadTimeGiven based on a service that your modal has access to.