I have an accordion from angular-ui bootstrap. In the header of each accordion i have a checkbox that should enable/disable the ability to open the accordion.
Heres the code
<div ng-repeat="b in board | filter:searchText track by b.Id">
<accordion-group class="animation-appear" ng-disabled="b.selected">
<accordion-heading>
<h4>
{{b.Name}} <small>- set list aliases</small>
<input type="checkbox" ng-checked="b.selected" ng-model="b.selected" ng-click="checkboxClick(b, $event)" style="float:right" />
</h4>
</accordion-heading>
....
....
....
</accordion-group>
Everything seems to work fine, except the ability to disable an accordion. The accordions work, the checkboxes in the accordions work, the model from $scope.board.selected is updated, but still the ng-disabled doesnt disable the accordion
Any help is greatly appreciated!
This is not supported in the latest released version (0.10.0) but the new release (coming this weekend!) has a support for the is-disabled property. See https://github.com/angular-ui/bootstrap/commit/9c43ae7c0a66ff454c97296122d8f82c89ac4d5e
You can build content of the https://github.com/angular-ui/bootstrap repo if you need this support now.
Related
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.
Im working on a project where I want to use a carousel to display some different content. I will not create the slides dynamically using an ng-repeat, this is because I have to move some of the content from other parts of the DOM into the slide.
I want to have some links with title connected to each slide, so if I click that link it should scroll to that slide. I have managed to do this, but the sliding behaviour is not as expected. Here is a plunker in which the weird behaviour is displayed: http://plnkr.co/edit/oZrLzRaLb5cAmMBnz4p0?p=preview
<div ng-controller="CarouselDemoCtrl as car">
<a ng-click="car.active = 0">Slide 1</a>
<a ng-click="car.active = 1">Slide 2</a>
<a ng-click="car.active = 2">Slide 3</a>
<uib-carousel ng-model="" active="car.active" interval="0" no-wrap="true" no-transition="false">
<uib-slide index="0">
<div style="background:blue; height:600px;">
Some content in here
</div>
</uib-slide>
<uib-slide index="1">
<div style="background:red; height:600px;">
Some content in here as well
</div>
</uib-slide>
<uib-slide index="2">
<div style="background:green; height:600px;">
Some cool content in here
</div>
</uib-slide>
</uib-carousel>
</div>
Any thoughts of why this happens, and how I can solve it?
Note: Im using angular 1.5.0 and ui-bootstrap 1.2.4
Best regards,
Daniel
have you install ng animation,
or you don't want to sliding you could edit the transition="true" to disable it
<uib-carousel ng-model="" active="car.active" interval="0" no-wrap="true" no-transition="true">
https://github.com/angular-ui/bootstrap/issues/5601
Issue seems to be in the angular-ui code itself;
In the $watch of 'active' "currentIndex = index;" is set before "self.select(slides[index]);" is run, by moving it down after it it'll work
I need to create custom styling for a select dropdown (including the options). The more I've dug into this, the more I've realized that styling options is quite difficult.
I'm currently using Bootstrap's dropdown and it works great, except for the fact that I have to use a function to assign a value.
This is how I am currently using a 'custom select dropdown':
<div class="form-element-container">
<div class="drop-down dropdown-toggle">
<label for="chooseAdvisor"></label>
<div>
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">{{mySelection}}</button>
<ul class="dropdown-menu">
<li ng-repeat="option in options">{{option}}</li>
</ul>
</div>
</div>
</div>
You can see that on click, I have to manually set the option in my controller rather than it being directly bound to my model. Is there any way that I can use Bootstrap's dropdown styling with angular's select tag?
I would love to be able to use my options repeater with 'track by', etc:
<select ng-options="item as item.label for item in items track by item.id" ng-model="selected"></select>
You can try it:
https://angular-ui.github.io/bootstrap/#/dropdown
Just a suggestion, I've not tested it yet.
Update answer:
I think you can instead of angular module : acute-select
https://github.com/john-oc/acute-select
Demo : http://john-oc.github.io/
Here is my accordion:
<accordion class="m3Details">
<accordion-group is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
<accordion-heading><span class="noQuery">Building<span class="caret"></span></span></accordion-heading>
<li ng-repeat="y in m3Info" class="{{y.linkclass}}" ng-if="!y.offsite" ><img src="{{y.icon}}" width="15px" height="15px">{{y.name}}</li>
</accordion-group>
<accordion-group>
<accordion-heading ng-click="isFirstOpen=!isFirstOpen"><span>Offsites<span class="caret"></span></span></accordion-heading>
<li ng-repeat="y in m3Info" class="{{y.linkclass}}" ng-if="y.offsite"><img src="{{y.icon}}" width="15px" height="15px">{{y.name}}</li>
</accordion-group>
</accordion>
This code works beautifully up to a certain point. The first group is always open and I have the header hidden so it cannot be toggled by the user. It opened, however, when the 2nd accordion header is closed. Perfect. But now, I want it to open again when the 2nd accordion is closed, so that they cannot be both closed at the same time.
I added in the ng-click="isFirstOpen=!isFirstOpen" in attempt to accomplish this as I have found it as a solution to closing an accordion when a button or something else is clicked. But it's not working when I put it in my accordion. Maybe I am putting it in wrong place or otherwise implementing it wrong? Perhaps there is another approach?
Thanks.
Using the answer by kjv here Handle open/collapse events of Accordion in Angular where it was suggested to put the ng-click inside the heading, around the text like so:
<accordion-heading><span ng-click="status.isFirstOpen=!status.isFirstOpen">Offsites<span class="caret"></span></span></accordion-heading>
When I click it, it starts to open for a split second and then closes. I am simply looking for a way to have one accordion-group closing open another.
I have a working plunker that replicates my results.
http://plnkr.co/edit/04SZ0T2hHAmuH7o11faH?p=preview
All that I need to see is this plunkr fixed to show that one accordion will open when another closes. Is it not possible to open an accordion when one is closed??
I have even tried to put the ng-click back in the accordion-heading and wrap a div tag around the content of accordion-heading according to this answer: Angularjs accordion ng-click on panel-header and still have not had any success.
Thanks to alienx's answer to my question here: How can I disable an accordion-group *after* I open it?
I was able to understand more of how to use booleans to manipulate functionality. Here is the solution to my question:
HTML
<accordion class="m3Details" close-others="false">
<accordion-group is-open="buildingsOpen">
<accordion-heading><span class="noQuery">Building<span class="caret"></span></span></accordion-heading>
<li ng-repeat="y in m3Info" class="{{y.linkclass}}" ng-if="!y.offsite"><img src="{{y.icon}}" width="15px" height="15px">{{y.name}}</li>
</accordion-group>
<accordion-group ng-click="runThis()">
<accordion-heading><span>Offsites<span class="caret"></span></span></accordion-heading>
<li ng-repeat="y in m3Info" class="{{y.linkclass}}" ng-if="y.offsite"><img src="{{y.icon}}" width="15px" height="15px">{{y.name}}</li>
</accordion-group>
</accordion>
For some reason using the status.isFirstOpen code, for example:
$scope.status={
isFirstOpen:true,
}
that is found in the docs of the Angular Accordion weren't as easily manipulated as the following:
JS
$scope.buildingsOpen = true;
$scope.runThis = function() {
$scope.buildingsOpen=!$scope.buildingsOpen;
}
Works perfect.
I knew it had to be that simple, maybe I didn't explain my question very well.
I am trying to track the order in which a user clicks the headers of a bootstrap accordion. I am running into trouble trying to add a ng-click attribute to the repeated accordion-group. I am trying to limit the click area to just the header text, not the entire group. I thought a good way to do this was to pass the click $event into the ng-click function, but it is not working.
Here is a Plunker with the broken ng-click attribute here:
http://plnkr.co/edit/yOTRVRjxRDTlnZ9Qwsk4?p=preview
Can someone kindly help me figure out the best Angular way to solve this?
You can use the accordion-heading for the custom header.
Here is the sample:
<accordion-group close-others={{oneAtATime}} ng-repeat="(key, value) in groupedByCategory" is-open="value.open" >
<accordion-heading>
<a ng-click="clickTrack($event)">{{key}}</a>
</accordion-heading>
<div ng-repeat="c in value | orderBy: 'rating'">
<input type="radio" name="Category" value="{{c.name}}-{{key}} "> {{c.name}} | {{c.rating}}
</div>
</accordion-group>