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/
Related
I am new to AngularJS.
I have created <li> to which I used ng-repeat.
<li> contains images and buttons like like, comment and share which is inside <li> and created by ng-repeat.
I have made function which will replace empty like button to filled like button (By changing background image of button).
But problem is this trigger applies to only first like button and other buttons does not change.
How can I fix this?
Code:
HTML:
<html>
<body>
<ul>
<li ng-repeat="media in images"><div class="imgsub">
<label class="usrlabel">Username</label>
<div class="imagedb">
<input type="hidden" value="{{media.id}}">
<img ng-src="{{ media.imgurl }}" alt="Your photos"/>
</div>
<!-- <br><hr width="50%"> -->
<div class="desc">
<p>{{media.alt}}</p>
<input type="button" class="likebutton" id="likeb" ng-click="like(media.id)" ng-dblclick="dislike(media .id)"/>
<input type="button" class="commentbutton"/>
<input type="button" class="sharebutton"/>
</div>
</div> <br>
</li><br><br><br>
</ul>
</body>
</html>
JS:
$scope.like = function(imgid)
{
document.
getElementById("likeb").
style.backgroundImage = "url(src/assets/like-filled.png)";
alert(imgid);
}
$scope.dislike = function(imgid)
{
document.
getElementById("likeb").
style.backgroundImage = "url(src/assets/like-empty.png)";
}
Thanks for help & suggestions :)
The id for each button should be unique but in your case, it's the same for all buttons ('likeb').
You can set the value of the attribute 'id' for each button dynamically by using '$index' and passing '$index' to the functions as follows:
<input type="button" class="likebutton" id="{{$index}}" ng-click="like($index)" ng-dblclick="dislike($index)"/>
Then in your controller, you can use the functions with the passed value.
For example,
$scope.like = function(index)
{
document.
getElementById(index).
style.backgroundImage = "url(src/assets/like-filled.png)";
}
Another good alternative in your case would be to use the directive ngClass.
use 2 css class for styling liked and disliked state, and then put the class conditionally with ng-class instead of DOM handling. and if you really want to perform a DOM operation (I will not recommend) then you can pass $event and style $event.currentTarget in order to perform some operation on that DOM object.
I want to use the bootstrap dropdown from the angular ui lib.
I'm getting an issue when I append the dropdown to another DOM element with dropdown-append-to (even dropdown-append-to-body is not working).
I can't have it working only when I use is-open with ng-click to trigger the dropdown.
I reproduced the issue in this plunker.
I'm using bootstrap 3.3.6, angular ui 2.1.3 and angular 1.5.8.
Hope somebody can help me.
You should work with uib-dropdown-toggle and also add an ng-click and toggle test at your controller
Also, dropdown-append-to-body should accept a value (default is false), like so dropdown-append-to-body="true"
<div class="btn-group" uib-dropdown dropdown-append-to-body="true" is-open="test">
<button type="button" ng-click="onClick(test)" class="btn btn-primary" uib-dropdown-toggle>
Dropdown on Body <span class="caret"></span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="btn-append-to-body">
<!-- list items -->
</ul>
</div>
exmaple plunk
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.
I'm a Newbie to AngularJS trying something with Angular Material and need some ideas / help.
I have icons of Font Awesome which are displayed with ng-repeat:
<ul ng-repeat="item in items">
<i ng-class="{'test': item.active}" class="fa fa-{{item.name}}">{{item.name}}</i>
</ul>
Below I have a list of the icons a with checkboxes:
<span ng-repeat="item in items | filter: item.active = false">
<input type="checkbox" ng-model="item.active"> {{item.name}}<br>
</span>
If a checkbox is activated, the list entry should disappear from the list.
This works with the filter of the property item.active
Now I want to display the activated items above the list with md-chips (Angular Material Chips).
So if a list item is activated, the element should be a md chip above the list (not displayed in the list anymore).
If I click on the 'X' in md-chip, only the state of the property item.active should change again to false.
I have my working files on Plunker, so my current working state can be read:
https://plnkr.co/edit/t3Xpp2AKEJHXBWhkLUYZ?p=preview
Does anybody got an idea how can I implement this?
The easiest way to do that is apply ng-click to your md-chip item and by this click it will set active = false:
...
<md-chips class="custom-chips" ng-model="items | filter: {active:true}" readonly="true">
<md-chip-template>
<span ng-click="$chip.active=false">
<strong>{{$chip.name}}</strong>
</span>
</md-chip-template>
</md-chips>
...
Here is a plnkr example.
EDIT:
Modified plunker to show only active md-chips.
Hope it will help.
You may want to filter the chips array using the builtin filterFilter function. The watcher that contains the latter will invoke the listener whenever the filterText changes.
...
$scope.array = [
"active directory",
"outlook",
"edrm",
"gcdocs",
"novell",
"iPrint",
"iManager",
"sigma",
"bitlocker",
];
$scope.filterText = "";
$scope.$watch('filterText', function(newValue, oldValue) {
$scope.filteredArray = filterFilter($scope.array, $scope.filterText);
}, false);
...
The following markup will render and filter the chipset.
<md-content flex class="md-padding">
<label>Filter: <input ng-model="searchText"></label>
<md-chips ng-model="filteredArray" readonly="ctrl.readonly"
md-removable="removable" placeholder="Enter an issue...">
<md-chip-template>
<strong>{{$chip}}</strong>
</md-chip-template>
</md-chips>
</md-content>
For further information on filters please see https://docs.angularjs.org/guide/filter
For further information on $watch please see https://docs.angularjs.org/api/ng/type/$rootScope.Scope
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>