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
Related
I am relatively new to angularJs so I am trying to learn how to do different things. I have been trying to make solutionName act as a p tag if there is no URL input for solutionUrl1, at the moment solutionName is acting as if it is hyperlinked even when its not. Any help would be appreciated.
<a ng-href="{{::data.solutionUrl1}}" class="card__title" style="text-align: center">
<span>{{::data.solutionName}}</span>
</a>
Use ng-if of angularjs to render either one or the other:
Something like this, you most probably have to change the condition to meet your needs. You can also create a new Variable in the JS files like showLink and set this variable to true/false depending on some conditions. And then just use this boolean variable to show/hide the link with the method outlined below:
<div ng-if="data.solutionUrl1">
<!-- code to render the link-->
</div>
<div ng-if="!data.solutionUrl1">
<!-- code to render just the span without the link -->
</div>
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>
I'd like to show element only one time within ng-repeat.
My code bellow doesn't work because "Event of today" is shown each time when an event is starting today...
My code :
<div class="line" ng-repeat="event in events">
<!-- h4 only once if condition is passed -->
<h4 ng-if="event.start.getTime() === today.getTime()">Event of today</h4>
<!-- h4 only once if condition is passed -->
<h4 ng-if="event.start.getTime() === tomarrow.getTime()">Event of tomarrow</h4>
<div class="event-body">
<h3>{{event.categoryName}} : {{event.title}}</h3>
</div>
</div>
Just create a filtered version of the events array and display that. You can make a function that refilters it, and call that whenever there's a change that needs it to update (putting it in a $scope.$watch function seems the easiest way to do this). It seems low-tech, but it really gives you the most control over what you end up seeing.
Here is a very stripped-down Plunker of this, just showing some simple filtering: Example.
<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'
My Plunker: http://plnkr.co/edit/xrzhG9NqYfv2Mbskbh1D?p=preview
In a nut shell, I have the code listed below in my index.html
<div data-ng-controller="addCtrl" data-ng-include="'app/views/add.html'" />
<div data-ng-controller="editCtrl" data-ng-include="'app/views/edit.html'" />
I have two buttons, one that shows the add.html, the other edit.html via $broadcast
With the current order, add works, but edit doesn't. If I flip the order, eg:
<div data-ng-controller="editCtrl" data-ng-include="'app/views/edit.html'" />
<div data-ng-controller="addCtrl" data-ng-include="'app/views/add.html'" />
Then edit works, but add doesn't.
This might have to do with why my previous question was screwing up, but not sure: "Element is not currently visible and so may not be interacted with" but another is?
It seems that angular can not part <div /> notation.
Expanding to <div ...></div> works.