I'm creating some tabs in my HTML page for which Im using AngularStrap library. I want to disable one of the tab in it.
My code :
<div bs-tabs>
<div data-title="General"> <!-- the tab which needs to be disabled -->
</div>
</div>
I tried using ng-show, ng-disabled and ng-if -- But it doesn't get disabled.
Any help would be appreciated.
This is something that has been fixed in 2.1.3.
After upgrading, 'ng-if' should be enough:
<div ng-model="tabs.activeTab" bs-tabs="">
<div ng-repeat="tab in tabs" title="{{ tab.title }}" bs-pane="" ng-if="tab.show">
<div ng-include="tab.page"></div>
</div>
</div>
There is now a disabled option for bs-pane (version 2.2.0 onwards)
Related
I am beginning with AngularJS, and I am wondering why there is a conflict between Bootstrap and Angularjs when I try to simply open a box like this:
Link:
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#open-baggage-box" aria-expanded="false" aria-controls="open-baggage-box">Add Now</a>
Box:
<div id="open-baggage-box" class="collapse add-price-section">
<div class="open-holder">
<div class="container">
</div>
</div>
</div>
It actually does not work and I don't really know why. Thank you
As angular templates are usually dynamically loaded, bootstrap can look for collapse element before it is rendered.
If you want to use Bootstrap UI elements with AngularJS, I recommend UI Bootstrap which implements them as Angular directives.
In your case, collapse directive will do the job :)
I need to start working in a directive.
I have 5 different views where the html is exactly the same, so I need to do the directive in order to minimize my HTML.
<div class="list betslip-item">
<div class="item betslip-header"
ng-class="slip.active == '1' ? 'betslip-header-active' : 'betslip-header-inactive'">
<div class="row">
<div class="col slip-name" ng-click="openMoreInfoSlip(slip)">
{{:: slip.teamName}}
</div>
<div class="col-30">
<a class="button-size select-button"
ng-click="swapLineSelection(slip)">
<i class="fa" ng-class="slip.active == '1' ? 'fa-check-circle' : 'fa-plus-circle'"></i>
</a>
<a class="button-size close-button"
ng-click="removeSlip(slip)"><i class="fa fa-times"></i>
</a>
</div>
</div>
</div>
<div class="item item-input" ng-class="(slip.lines.length > 1) ? 'item-select' : ''">
<div class="input-label">
{{:: slip.nss}} - {{::slip.gameDate}}
</div>
<span class="pick-label"
ng-init="currentLine = getCurrentLine(slip)"
ng-if="slip.lines.length < 2">{{:: currentLine.pick}}</span>
<select
ng-if="slip.lines.length > 1"
ng-init="currentLine = getCurrentLine(slip)"
ng-model="currentLine"
ng-options="line as line.pick for line in slip.lines"
ng-change="updateSelectionLine(slip, currentLine.pointsBought)">
</select>
</div>
</div>
That is the HTML I am talking about, I should include css classes and everything, is that possible?
Any help is very welcome.
You don't need to use a custom directive. If all you want to achieve is to be able to reuse some html you can always put it into another template and use it by ng-include:
<ng-include src="'/templates/reusableComponent.html'"></ng-include>
Reusing the same HTML file as 5 different views is possible but you will need to place all the value or data that you require to show on all the 5 pages in one and use javascript or jquery to display according. so instead of doing this creating 5 views would be better, it isn't using up any server processing time, only memory and since it's just 5 views i dont think it would affect it so much also.
i've also included a link of the Angular project that i was working on below, which had aorund 2-3 views so incase you require as to go about that, with ng-route etc.
GitHub link for AngularJS Project
Hope this helps
I would put a language picker in this section:
<section id="logo-section" class="text-center">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="logo text-center">
<h1>Batpeppa</h1>
<span>Web Designer Trio</span>
</div>
</div>
</div>
</div>
</section>
I would insert two flag icons under "Web Designer Trio" subtitle.
I would use the class="icon-flag" from Bootstrap 3.
I think I have to use something like this:
<span class="icon-flag">
Well, the native Bootstrap 3.x icons are named glyphicon-<name>. So in your case:
<i class="glyphicon glyphicon-flag"></i>
<i class="glyphicon glyphicon-flag"></i>
Demo. Your code does not work because you are referring to the "old" Twitter Bootstrap 2.x icons, named icon-<name>. If you want to use those, you must download and include the .png and .css from here. Then you should be fine.
I'm trying to add ng-click into Kedo UI template, but function saveCustomView on theUser controller still cannot be fired.
But outside of the tag is ng-click working correctly.
<div id="grid" data-ng-controller="UsersCtrl" data-ng-init="initGrid()" >
<script type="text/x-kendo-template" id="testBtn" >
<div class="toolbar">
<a data-ng-controller="UsersCtrl"
ng-click="saveCustomView()">
Add actual selection to custom views
</a>
</div>
</script>
Could somebody tell me how can I solve it?
Thanks for any help.
This question is in regards to angluarjs using bootstrap css and javascript.
I have a list of items that I want to display and set up so that clicking on them opens a dialog to allow you to change the values. Something like this:
<!-- The repeater !-->
<ul>
<li ng-repeat="item in items" ng-click="showDlg(item)">
{{item.text}}
</li>
</ul>
<!-- The dialog !-->
<div id="dlg" class="modal hide fade">
<div class="modal body">
<input id="title" type="text">
<button type="button">ok</button>
</div>
<div>
The question is how do I implement the showDlg function to put up #dlg as a pop up dialog prepopulated with the fields from item (in this trivial case putting item.text into the input box.)
I can, and in fact do, hack it by setting the values directly:
$scope.showDialog = function(item) {
$("#dlg #title").val(item.text);
$(#dlg).modal({});
}
But it seems to me that I should be using a controller for the dialog and setting it up as a form. I can see how to set it up as a form, but not how to get the data into the form to start with.
Any help would be appreciated.
If you are willing to use a 3rd party, native AngularJS directives for Twitter's bootstrap I was answering a very similar question today: https://stackoverflow.com/a/15051565/1418796
As part of the angular-ui we are working on native AngularJS directives that don't require dependency on twitter's JavaScript: http://angular-ui.github.com/bootstrap/. The advantage is that you've got less dependencies to include and directives that are well integrated into the AngularJS ecosystem.
Using the $dialog service from the mentioned repository you could edit items from a list like so: http://plnkr.co/edit/PG0iHG?p=preview
You can set the selected item in the scope
$scope.showDialog = function(item) {
$scope.selectedItem = item;
$("#dlg").modal({});
}
and update the dialog html like any other html fragment
<div id="dlg" class="modal hide fade">
<div class="modal body">
<input id="title" type="text" ng-model="selectedItem.text">
<button type="button">ok</button>
</div>
<div>