I use the following code snippet to list an array of objects in html document
, it shows the list of link accurately ...
<div ng-repeat="item in List">
<a ng-click="Show('{{item.name}}');"> ShowName </a>
</div>
it outputs the following html code:
<a ng-click="Show('name1')">ShowName</a>
.
.
.
<a ng-click="Show('//upto nth name')">ShowName</a>
Here is my angular code :
$scope.Show=
function(getName)
{
alert(getName);
}
but when I click on any link it shows "{{item.name}}" instead of showing "name1" or respective name in the alertbox...
I also tried
Show('{{item.name}}');
but the result is same...
what I am doing wrong????
You are not supposed to use {{}} inside an Angular directive. Your code should be like this:
<div ng-repeat="item in List">
<a ng-click="Show(item.name)"> ShowName </a>
</div>
You can either use following style
<li ng-repeat="item in List">
{{item.name}}
</li>
here $index represent index of your array. i prefer to use this because here you can access full object.then just do what you want.
$scope.clickit = function(x) {
console.log($scope.List[x])
}
if you don't like the above style you can use the below style
<li ng-repeat="item in List">
{{item.name}}
</li>
The problem here is that you are using ' and {} when passing the variable as an argument to the function.
Change
<a ng-click="Show('{{item.name}}');"> ShowName </a>
to
<a ng-click="Show(item.name);"> ShowName </a>
I am working on the Single page application and using AngularJS. In my application, all DOM elements get loads using ajax and due to this I have used number of ng-repeat and binding expression and this is the reason my page is taking long time to load the page. Please help to solve my issue.
app
angular.module('tabApp', []);
Service
angular.module('tabApp')
.service('mrcService', ['$http', function($http) {
this.categories = [];
this.getCategories = function() {
return $http({
method: "GET",
url: 'mrcdata.aspx'
}).success(function(data) {
categories = data;
return categories;
});
};
}]);
Controller
angular.module('tabApp')
.controller('dynamicContentCtrl', ['$scope', 'mrcService', function($scope, mrcService) {
$scope.categories = [];
mrcService.getCategories().then(function(response) {
$scope.categories = response.data.Categories;
});
}]);
HTML code
<div class="main-content container" ng-controller="dynamicContentCtrl">
<div ng-controller="desktopTabCtrl" class="row desktop-content">
<div class="col-md-3 col-sm-4 category-items">
<nav class="nav categories-nav">
<ul class="categories">
<li ng-repeat="category in categories" class="category" ng-class="{ active: isSet(category.CategoryRank) }">
<a href="javascript:void(0)" ng-click="setTab(category.CategoryRank)" class="text">
<span>{{category.CategoryTitle}}</span>
</a>
<span class="arrow-right"></span>
</li>
<li class="category static">
<C5:LocalLiteral runat="server" Text="mrc.home.learnmoretab"/>
</li>
</ul>
</nav>
</div>
<div class="col-md-9 col-sm-8 document-tiles">
<div ng-repeat="category in categories" ng-show="isSet(category.CategoryRank)" class="tile-container">
<div class="row">
<div ng-repeat="document in category.Documents" class="col-md-6 col-sm-6 tile">
<div class="tile-content row">
<div class="col-md-12 col-sm-12">
<div class="thumbNail-content col-md-6 col-sm-6">
<p class="title">{{document.DocumentTitle}}</p>
<p class="audience">{{document.Audience}}</p>
</div>
<div class="thumbNail-image col-md-6 col-sm-6">
<img alt="Thumb Nail" src="{{document.ThumbnailUrl}}">
</div>
</div>
<div class="col-md-12 col-sm-12">
<div class="download-section">
<select class="lang-dropdwn"
ng-model="document.DefaultDialectId"
ng-change="selectLang(document , document.LocalizedDocuments , document.DefaultDialectId )">
<option ng-repeat="localizedDocument in document.LocalizedDocuments"
value="{{localizedDocument.DialectId}}">
{{localizedDocument.LanguageName}}
</option>
</select>
</div>
<div class="button-conatiner" ng-init="document.DownloadLink = document.DocumentId +':'+document.DefaultLocalizedDocumentId">
<a class="button" href="documentdownloader.aspx?documentid={{document.DownloadLink}}"><C5:LocalLiteral runat="server" Text="basket.esddelivery"/></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here's a few options you can try to improve performance.
1. You should set the track by in the ng-repeats
To minimize creation of DOM elements, ngRepeat uses a function to "keep track" of all items in the collection and their corresponding DOM elements. For example, if an item is added to the collection, ngRepeat will know that all other items already have DOM elements, and will not re-render them.
The default tracking function (which tracks items by their identity) does not allow duplicate items in arrays. This is because when there are duplicates, it is not possible to maintain a one-to-one mapping between collection items and DOM elements.
If you do need to repeat duplicate items, you can substitute the default tracking behavior with your own using the track by expression.
For example, you may track items by the index of each item in the collection, using the special scope property $index.
Example:
<div ng-repeat="item in items track by $index">{{item.name}}</div>
2. You could use one way data binding to items you know wont be changed. This will disable the watchers for those items and improve performance. Example:
Instead of this
{{item.name}}
Use this
{{::item.name}}
Please remember that this is a one way binding and these values will not be updated if something changes in your scope but you will need to manually update it.
3. Try to limit the ng-show and ng-hide attributes since this will add more watchers and leads to poor performance.
I have 2 scope variables like the following:
$scope.degrees =[{DegreeCategoryID:"1",DegreeCategory:"Accounting",DegreeCategoryType:"Applied Sciences"},
{DegreeCategoryID:"2",DegreeCategory:"Advanced Manufacturing/Mechatronics Technology",DegreeCategoryType:"Applied Sciences"},
{DegreeCategoryID:"3",DegreeCategory:"Air Conditioning and Refrigeration Technology",DegreeCategoryType:"Applied Sciences"},
{DegreeCategoryID:"4",DegreeCategory:"Auto Body Technology",DegreeCategoryType:"Applied Sciences"},
{DegreeCategoryID:"78",DegreeCategory:"Associate in Sciences",DegreeCategoryType:"Academic"},
{DegreeCategoryID:"79",DegreeCategory:"Associate of Arts in Teaching",DegreeCategoryType:"Academic"},
{DegreeCategoryID:"80",DegreeCategory:"Emphasis",DegreeCategoryType:"Academic"},
{DegreeCategoryID:"81",DegreeCategory:"Field of Study",DegreeCategoryType:"Academic"}];
$scope.degreecategories=[{DegreeID:"1",DegreeCategoryID:"1",Degree:"Accounting AAS ",DegreeTypeID:"2",BHC:"1",CVC:"1",EFC:"1",ECC:"1",MVC:"1",NLC:"1",RLC:"1",Description:""},
{DegreeID:"2",DegreeCategoryID:"1",Degree:"Accounting Assistant Certificate ",DegreeTypeID:"1",BHC:"1",CVC:"1",EFC:"1",ECC:"1",MVC:"1",NLC:"1",RLC:"1",Description:""},
{DegreeID:"3",DegreeCategoryID:"1",Degree:"Accounting Clerk Certificate ",DegreeTypeID:"1",BHC:"1",CVC:"1",EFC:"1",ECC:"1",MVC:"1",NLC:"1",RLC:"1",Description:""},
{DegreeID:"4",DegreeCategoryID:"1",Degree:"Advanced Technical Certificate in Professional Accountancy",DegreeTypeID:"1",BHC:"",CVC:"",EFC:"",ECC:"",MVC:"1",NLC:"",RLC:"",Description:""},
{DegreeID:"5",DegreeCategoryID:"2",Degree:"Advanced Manufacturing/Mechatronics Technology AAS ",DegreeTypeID:"2",BHC:"",CVC:"",EFC:"1",ECC:"",MVC:"",NLC:"",RLC:"",Description:""},
{DegreeID:"6",DegreeCategoryID:"2",Degree:"Advanced Manufacturing/Mechatronics Technology Certificate ",DegreeTypeID:"1",BHC:"",CVC:"",EFC:"1",ECC:"",MVC:"1",NLC:"",RLC:"",Description:""},
{DegreeID:"7",DegreeCategoryID:"3",Degree:"Air Conditioning and Refrigeration Technology AAS ",DegreeTypeID:"2",BHC:"",CVC:"",EFC:"1",ECC:"",MVC:"",NLC:"",RLC:"",Description:""},
{DegreeID:"8",DegreeCategoryID:"3",Degree:"Profit Center Manager Enhanced Skills Certificate ",DegreeTypeID:"1",BHC:"",CVC:"",EFC:"1",ECC:"",MVC:"",NLC:"",RLC:"",Description:""},
{DegreeID:"9",DegreeCategoryID:"3",Degree:"Residential - Technician I Certificate ",DegreeTypeID:"1",BHC:"",CVC:"1",EFC:"1",ECC:"",MVC:"",NLC:"",RLC:"",Description:""},
{DegreeID:"10",DegreeCategoryID:"3",Degree:"Residential - Technician III Level II Certificate ",DegreeTypeID:"1",BHC:"",CVC:"1",EFC:"1",ECC:"",MVC:"",NLC:"",RLC:"",Description:""},
{DegreeID:"11",DegreeCategoryID:"3",Degree:"Residential AAS ",DegreeTypeID:"2",BHC:"",CVC:"1",EFC:"1",ECC:"",MVC:"",NLC:"",RLC:"",Description:""},
{DegreeID:"12",DegreeCategoryID:"4",Degree:"Auto Body Metal Technician Certificate ",DegreeTypeID:"1",BHC:"",CVC:"",EFC:"1",ECC:"",MVC:"",NLC:"",RLC:"",Description:""}];
Both my above variables are present in the same controller. I am trying to display data in such a way that, when i click a button named 'Academic', it displays all the DegreeCategoryType:"Academic" variables from $scope.degrees using a filter.(until here it works fine)
Now i wanted to display another list following the previous list based on the selection i make from within the list ie. when i click one selection from the above made list, i wanted to to display the details from my $scope.degreecategories such that the it matches and filters based on the DegreeCategoryID. How do i approach this issue? i already posted this question but the message i tried to convey was not proper.
MARKUP Masterlist
<div ng-show="display.academic" class="col-lg-4 col-md-4 col-sm-4">
<div class="panel panel-info list-group list-unstyled" data-spy="scroll" data-target="#panelcategory" data-offset="0" style="max-height:300px;overflow:auto;position:relative;">
<div class="panel-heading">
<h3 class="panel-title">Academic</h3>
</div>
<a href='#' ng-repeat="degree in degrees | filter:{DegreeCategoryType:'Academic'}" class="list-group-item">
<li ng-click="showAcademic(degree)" >{{degree.DegreeCategory}}</li>
</a>
</div>
</div>
Markup sublist
<div ng-show="display.academiccourse" class="col-lg-9 col-md-9 col-sm-9">
<div class="panel panel-info list-group list-unstyled" data-spy="scroll" data-target="#panelcategory" data-offset="0" style="max-height:300px;overflow:auto;position:relative;">
<div class="panel-heading">
<h3 class="panel-title">{{DegreeCategory}}</h3>
</div>
<a href='#' ng-repeat="degree in degreecategories | filter:{DegreeCategoryID:filterSub}" class="list-group-item">
<li ng-click="display.appliedsciencescourse" >{{degree.Degree}}</li>
</a>
</div>
</div>
JS
$scope.showAcademic = function(degree){
$scope.DegreeCategory = degree.DegreeCategory;
$scope.filterSub = degree.DegreeCategoryID;
$scope.display.academiccourse = true;
};
<a href='#' ng-repeat="degree in degrees | filter:{DegreeCategoryType:'Applied Sciences'}" class="list-group-item">
<li ng-click="display.appliedsciencescourse" >{{degree.DegreeCategory}}</li>
</a>
I cant see that your ng-click actually does anything. If your ng-click calls a function, applying the element clicked on as a parameter, then you can set $scope.selectedCategory = yourcategory, on your second list, you can filter by selectedCategory, that will exist in the scope.
I'm developing a small notifications-like module, where the user can see his 5 latest activities that are logged in the DB (MSSQL). The values that I need are all there, but for some reason knockout binding is not working. Here are code snippets:
<div class="dropdown-menu toolbar pull-right" data-bind="with: layoutLogsModel">
<h3 style="border: none;">Recent activities:</h3>
<!-- "mailbox-slimscroll-js" identifier is used with Slimscroll.js plugin -->
<ul id="mailbox-slimscroll-js" class="mailbox" data-bind="foreach: layoutLogsModel.notification">
<div class="alert inbox">
<a href="javascript:void(0)">
<i class="icon-book" style="color: orange;"></i>
Some text
</a>
<br>
Some text #2
</div>
</ul>
</div>
For now, I only want to display random text for every item that is in the observableArray.
ViewModel is the following:
var layoutLogsModel = {
notification: ko.observableArray()
};
function getLastFiveActivities() {
get(apiUrl + "Logs/GetLastFiveActivities", { ClientUserID: loggedUserID }, function (data) {
layoutLogsModel.notification(data);
});
}
And every time I call this function, the list is empty (IMAGE)
(the function is called on click, and absolutely no errors are shown in the console).
What is it that I am doing wrong?
EDIT:
The thing was, I forgot to execute ko.applyBindings for that viewModel. Then, I changed the HTML to look like this:
<ul id="mailbox-slimscroll-js" class="mailbox" data-bind="foreach: notification">
<div class="alert inbox">
<a href="javascript:void(0)">
<i class="icon-user" style="color: green;"></i>
<span data-bind="text: $data"></span>
</a>
</div>
</ul>
Aslo, I modified the get function slightly, like this:
function getLastFiveActivities() {
get(apiUrl + "Logs/GetLastFiveActivities", { ClientUserID: loggedUserID }, function (data) {
layoutLogsModel.notification(data.Notification);
});
}
(changed data to data.Notification based on the MVC model property that contains the array)
After all that, the data was available immediately.
try removing the layoutLogsModel from the foreach, you are already using it with the binding "with", so eveything in that div will be part of layoutLogsModel.
<div class="dropdown-menu toolbar pull-right" data-bind="with: layoutLogsModel">
<h3 style="border: none;">Recent activities:</h3>
<!-- "mailbox-slimscroll-js" identifier is used with Slimscroll.js plugin -->
<ul id="mailbox-slimscroll-js" class="mailbox" data-bind="foreach: notification">
<div class="alert inbox">
<a href="javascript:void(0)">
<i class="icon-book" style="color: orange;"></i>
Some text
</a>
<br>
Some text #2
</div>
</ul>
</div>