I want to check how many <div class="topology-list"> I have using Angular. At the moment, there are three
I have tried:
angular.element(document.querySelectorAll('.topology-list')).length
This logs 1 (should be 3)
document.querySelectorAll('.topology-list')
Logs 1 too
document.getElementsByClassName('topology-list');
The last one logs an object with the 3 items, but if I add .length it logs 1
Create a directive "your-directive" and put it to the outermost of the HTML
Try the above selections in your directive and all of them should give the correct result.
<body ng-app="yourAppName">
<div your-directive>
<!-- Here your all controllers are loaded-->
</div>
</body>
Related
I'm creating a website with multiple tabs, and one of them is listing elements, it's the Product tab.
I've got a problem with "ng-repeat", I want to fill a HTML depending on a table of table in angular on the tab, it works fine on the first load, but if I go to another tab and then go again on the product tab, the "ng-repeat" repeats once more and it stacks with the first one.
Example:
Firstload: an apple and a strawberry are loaded fine.
Secondload: I now have apple strawberry and apple strawberry
And so on.
<slick dots="true" prev-arrow="null" next-arrow="null" init-onload="true" data="productsTab">
<div class="productsPage scrollBar" ng-repeat="tab in productsTab">
<div class="productsProduct" ng-repeat="product in tab">
<div class="productsProductTitle">{{product.name}}</div>
</div>
</div>
</slick>
I can also say that I load my data from a factory that I get in controller this way:
productsFactory.build().then(function(facto) {
$scope.productsTab = facto;
});
Hope you can help me!
I think your problem is that init-onload. I am not sure what it does, but if it triggers the call to the controller in some way, it also triggers the promise every time you go back to the tab. You can cache the results from the promise inside the service. Here's an article from this site on how to cache promises:
Caching a promise object in AngularJS service
Hope this will help.
Here is example how to handle multiple ng-repeats, I hope this will help you.
http://plnkr.co/edit/TfGMm1SgpRmgFSTuTuE0?p=preview
<script>
var app=angular.module('myapp',[])
app.controller('demo',function($scope){
$scope.products={
product:[{
name:'abc'
}]
}
})
</script>
</head>
<body ng-app="myapp" ng-controller="demo">
<div ng-repeat="product in products">
<div ng-repeat="p in product">
<span>{{p.name}}</span>
</div>
</div>
</body>
I noticed from the docs I found here https://github.com/vasyabigi/angular-slick that there are no parenthesis on on-init=true. Not sure if that matters.
When I have issues with arrays not resetting I use angular.copy() an empty list variable before loading to the scope. That way I know the array is empty before I add anything to it.
Its day-2 I have started learning angularJS. I got to know
In an Application ng-app will be same for all or its a definition for the application.
A ng-app can have more than 1 ng-controller.
Based on controller name we can move the control to its implementation.
An application may have more than one div tag and every div may have different controller.
From above understaning I have written below sample code to test:
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="expressions" >
<div ng-controller="NGExpressionController">
<h1>This is AngularJS Expression example.......</h1>
<p>On String expression...</p>
Name: <input ng-model="name" type="text"></input></br>
Your name is {{name}}
</div>
<div ng-controller="NGExpressionControllerTwo">
<h1>This is AngularJS Expression example.......</h1>
<p>On String expression...</p>
Name: <input ng-model="adddress" type="text"></input></br>
Your name is {{address}}
</div>
<script>
angular.module('expressions', []).controller('NGExpressionController',function($scope){
$scope.name="Test Name";
});
</script>
<script>
angular.module('expressions', []).controller('NGExpressionControllerTwo',function($scope){
$scope.address="Kolkata";
});
</script>
</body>
</html>
But above piece of code showing below error:
https://docs.angularjs.org/error/ng/areq?p0=NGExpressionController&p1=not%20a%20function,%20got%20undefined
Where I am going wrong? Is my understanding is wrong or code implementation is wrong.. Any form of help would be a great help.
You're implementing it twice (2 <script> tags) which means he won't recognise the first one anymore.
Working Plnkr: https://plnkr.co/edit/eeFddCQSBg5Lm7SOyZH0?p=preview
<script>
angular.module('expressions', []).controller('NGExpressionController',function($scope){
$scope.name="Test Name";
}).controller('NGExpressionControllerTwo',function($scope){
$scope.address="Kolkata";
});
Using <script> to load controllers however is never a good practice, but since it's only your second day learning Angular, I'll leave it like that :) Anyway, you can always use https://www.codeschool.com/ You'll learn by doing.
first your code has some errors , due incorrectly defining the module,
<script>
angular.module('expressions',[])
.controller('NGExpressionController',function($scope){
$scope.name="Test Name";
})
.controller('NGExpressionControllerTwo',function($scope){
$scope.address="Kolkata";
});
</script>
when creating an app you have to define a module once, and after defining a module you use that module by calling correctly module object,
for creating module use
angular.module('yourModuleName',[])
to use that module again use
angular.module('yourModuleName')
no need of [ ], Square barckets, it used for defining dependencies for that module ,and when putting it wil result in re-initialising module again , and you will losse previously defined module properties,
1 : ng-app directive will initialise an angular app, and it will be available for the whole app. anyway we can manually create (bootstrap) multiple angular apps in a single application link
2 : An ng- app can have multiple Controllers , we can create our controllers and bind them whith any dom elements as we want .
<div ng-controller="NGExpressionController">
{{name}}
<div ng-controller="NGExpressionControllerTwo">
{{address}}
</div>
</div>
3 : based on the defined controller we can manipulate our logic or functions for the corresponding dom elements
4 : obviously yes , and you can nest your controllers to make use of $scope inheritance too. , be sure to use them wisely ...
happy coding...
<div ng-repeat="item in CategorizedItems"
ng-if="CategorizedItems.length> 0"
class="row customRow itemBorder animated slideInLeft" >
{{item.name}}
</div>
I show the list of items in above div.
On click of a button, CategorizedItems are updated.
i.e
$scope.CategorySelected=function(categoryName){
$rootScope.CategorizedItems =[];
$rootScope.CategorizedItems = $rootScope.Items.filter(function(obj){
if(obj.category.name === categoryName)
return obj
});
}
This method is called.Now, when I go from one class to another, New items appear gracefully but items from previous category appear under the list of new items for a couple of seconds.
This is a common problem in Angular.
Most people do this ...
<div ng-if="false">
don't display me
</div>
and then at end of HTML ...
<script src=".....angular.min.js">
and expect the DIV to not appear. Of course it will initially appear in this scenario since it has no idea what ng-if means UNTIL angular is loaded.
Put your angular script include at top of page.
You may also wish to consider using ngCloak directive or CSS class, which is the documented way of resolving this issue (assuming script tag is at top of page).
If I have real problems with this then I might use $scope.readyToRender boolean variable in my controller to control when to display elements.
e.g. at end of controller code I would set it to true and wrap code in an ng-if='readyToRender'
I'm trying to set the active pane of a pair of tabs programmatically as part of interface. When I set it with a number, which appears to be the correct way looking at the docs, I get the following error.
Error: s.assign is not a function
.link/<#http://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.1.6/angular-strap.min.js:9:13383
There's only one .assign call in the uncompressed version of that file, which is on line 3280. Looking at that line, unless $parse is doing some seriously clever stuff, it would appear that I'm trying to call .assign on a number, which I assume is the wrong thing.
What am I doing wrong? Is there a quick way to fix it (assuming it's a semi-complex problem)?
Sample HTML
<div class="full-height" data-fade="1" data-bs-tabs="" data-bs-active-pane="{{ controller.getActiveTab() }}">
<div data-title="Tab 1" data-bs-pane="">
<!-- Injected content of tab 1 -->
</div>
<div class="full-height" data-title="Tab 2" data-bs-pane="">
<!-- Injected content of tab 2 -->
</div>
</div>
I don't think you can use a function or a fixed value with the attribute helper as the directive will try to update the value whenever the user change tab.
If you replace your function with a variable, your code will work.
HTML
<div class="full-height" data-fade="1" data-bs-tabs="" data-bs-active-pane="activePanel">
<div data-title="Tab 1" data-bs-pane="">
<!-- Injected content of tab 1 -->
</div>
<div class="full-height" data-title="Tab 2" data-bs-pane="">
<!-- Injected content of tab 2 -->
</div>
</div>
JS
$scope.activePanel = 1; // This is the initial active panel.
DEMO
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.