How do I set uib-typeahed result to uppercase from HTML view only.
I don't care of any result from controller, but on the view it should be in uppercase.
Also, uppercase filter not working on it.
Here is attached plunker.
Help me out,
Thanks.
The answer provided by Ashish is good but if you want to make the UI consistent, you can refer this approach
<input type="text" ng-model="selected"
uib-typeahead="state.toUpperCase() for state in states | filter:$viewValue | limitTo:8"
class="form-control">
so that the selected value is also in Uppercase inside the input box
Please check this plunker
You need to use custom template for this using typeahead-template-url="customTemplate.html"
And add new custom template like this.
<a>
<span ng-bind-html="match.label |uppercase"></span>
</a>
You can just add a css in your case to make the results in the view uppercase
.typeahead-demo .dropdown-menu {
text-transform : uppercase;
}
Plunker: https://plnkr.co/edit/Ni719u1pNCOVMiMfLQeL?p=preview
Note: Have removed uppercase from your input element because that is not going to work.
Related
How to make angular translate work with inner content? By default it removes everything inside the element containing the translate directive.
When using the directive translate to translate stuff, the framework removes everything inside the HTML element.
In most cases this is not a problem since, you will want your translation to take all your content.
However in some cases it's annoying, for example with labels, see the following plnkr. The following translation will remove the select element.
<label translate> STATE
<select ng-model="selectedItem" ng-options="item.name for item in items track by item.id"></select>
</label>
<label translate="STATE">
<select ng-model="selectedItem" ng-options="item.name for item in items track by item.id"></select>
</label>
https://plnkr.co/edit/wcMuDVMhxH3wbSUTUwtY?p=preview
I am aware that I could use the attribute for or label in this case to solve the problem in this particular case, but I'm after a general solution.
The for attribute you mentioned about is a good way to go, in fact it is the correct and semantic way of doing it:
<label for="state" translate>STATE</label>
<select
ng-model="selectedItem"
ng-options="item.name for item in items track by item.id"
id="state"></select>
i think you can try this instead
<label> {{'STATE'|translate}} </label>
<select ng-model="selectedItem" ng-options="item.name |translate for item in items track by item.id"></select>
works like charm on my side
p.s : i cant edit your plunker due to my internet connection issue. but I tested what I ust done like above and it works well on my side as long as the translations json is matched with your options
edit : sorry. i forgot to put close tag of label :'(
I have a form, and a list of items.
I used ng-model="searchFor" to filter out the list of items appropriately (this part is working fine), but I also want to "submit" the item that's filtered out -- which would require ng-model="adding_item.name" on the input field as well (I think).
Can you have multiple ng-models on one input field?
Is there another way around this?
Try using ng-change event to capture model value and assign it to other input element with its own ng-model.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<input type="text" ng-model="input" ng-change="input1=input;input2=input; " />
<input type="hidden" ng-model="input1" />
<input type="hidden" ng-model="input2" />
<br>Model
<br>{{input | uppercase}}
<br>Model 1
<br>{{input1 | uppercase}}
<br>Model 2
<br>{{input2 | uppercase}}
</div>
No, ngModel wasn't supposed to do things like this, at this point it is better to start relocating the logic from the view. For this scenario you could make use of getterSetter option:
https://docs.angularjs.org/api/ng/directive/ngModel#binding-to-a-getter-setter
It is hard to make substantial suggestions without seeing the code.
I noticed that the Angular-UI have discontinued their UI-Select2 directive in favor of the new UI-Select (with multiple themes - select2, bootstrap, selectize).
It looks like this:
<ui-select multiple ng-model="multipleDemo.colors" theme="select2" ng-disabled="disabled" style="width: 300px;">
<ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
<ui-select-choices repeat="color in availableColors | filter:$select.search">
{{color}}
</ui-select-choices>
</ui-select>
<p>Selected: {{multipleDemo.colors}}</p>
Initially my selectbox is supposed to be empty but ready to take typed characters, that is a string of at least 4 characters and then make an API call to retrieve a list of suggested values which are to populate the box. One value will then be chosen, and searching should be repeated as needed.
First I tried $watching the ng-model which in this case is multipleDemo.colors (using this example from the demos). The API call never occurred and then I realized why. The actual model is not changed at all because it only changes when a selection is made (my selectbox is empty so nothing can be selected).
My conclusion is that I should (be able to) $watch what's been added as filter, namely filter: $select.search.
Does anyone know how am I supposed to use that one in my controller?
This:
$scope.$watch('$select.search', function(newVal){
alert(newVal);
});
doesn't work.
EDIT:
For anyone's reference, see this short discussion: Is it possible to add support for custom query function like the select2?
EDIT 2:
I solved this by using $emit from within the directive so the value is available in my controller now. But now I'd like to know how can I override this part of the directive so the directive itself can be left intact so it doesn't break in future updates?
Use the refresh attribute on the <ui-select-choices> element to call a function on your scope with $select.search as the parameter:
<ui-select-choices repeat="color in multipleDemo.availableColors | filter:$select.search"
refresh="refreshColors($select.search)"
refresh-delay="0">
{{color}}
</ui-select-choices>
Then use the function (refreshColors() in this snippet) to update multipleDemo.availableColors accordingly.
You may also use the refresh-delay attribute to specify how many milliseconds to debounce the function so it is not called too many times in quick succession.
I have also put availableColors on multipleDemo like you have done for multipleDemo.colors, as is recommended.
Reference: ui-select directive wiki under section Examples: Async.
There seems to be an on-select attribute, see Github example:
<ui-select ng-model="person.selected" on-select="someFunction($item, $model)" [...]>
[...]
</ui-select>
Use ngInit to get the value,
<div ui-select ng-init="mySelect = $select"></div>
<button ng-click="search(mySelect.search)">Search</button>
You can alse watch 'mySelect' instead
$scope.$watch('mySelect.search', function(newVal){
alert(newVal);
});
Bear with me, this is my first answer on SO.
So the current top answer does not work for me. Just want to provide another option. The refresh property on the ui-select-choices does not trigger the named function in my scope.
I followed the info in their docs for accessing the UI select for custom features. Create a custom directive in which you watch $select.search like
myModule.directive('myUiSelect', function() {
return {
require: 'uiSelect',
link: function(scope, element, attrs, $select) {
scope.$watch('$select.search', function (search) {
if (search) {
...
}
});
}
};
});
and then include the directive on your <ui-select my-ui-select> tag.
I solved it by creating an event in the right spot within the directive and then $emitting it - eventually I am able to listen to the event in my controller and use the value.
The downside to this is that I've put this directly in the 3rd-party's directive so it can't be safely updated. I need to find a way to override the directive. If you have any ideas, please let me know.
i want to use ment-io in my project from http://jeff-collins.github.io/ment.io/#/examples.i had implement this about 100% .but that cannot be applicable in that. how to add id in mentio textarea div dynamically
my code :
<div contenteditable mentio
mentio-typed-term="typedTerm"
mentio-macros="macros"
mentio-require-leading-space="true"
class="editor form-control"
id="htmlContent{{index}}"
ng-model="htmlContent">
</div>
<mentio-menu
mentio-for="'htmlContent'"
mentio-trigger-char="'#'"
mentio-items="people"
mentio-search="searchPeople(term)"
mentio-select="getPeopleText(item)"
></mentio-menu>
The issue is that when using an id that has an expression in it, it will not have resolved by the time the menito-menu directive tries to locate the element. One way to work around this is to use a ng-if on mentio-menu that waits for the expression to have resolved.
http://plnkr.co/edit/BUjixoaGZ8f54ZTv84bh?p=preview
<body ng-app="app" ng-controller="testCtrl">
<div contenteditable
mentio
mentio-typed-term="typedTerm"
mentio-require-leading-space="true"
class="editor form-control"
id="{{'htmlContent' + index}}"
ng-model="htmlContent">
</div>
<mentio-menu ng-if="index"
mentio-for="'htmlContent' + index"
mentio-trigger-char="'#'"
mentio-items="people"
mentio-search="searchPeople(term)"
mentio-select="getPeopleText(item)">
</mentio-menu>
</body>
Or if you want to do it in an ng-repeat you could do something like this:
http://plnkr.co/edit/JslXZ4ETZa3qFZyPMbAK?p=preview
<div ng-repeat="item in items">
<div contenteditable
mentio
mentio-typed-term="typedTerm"
mentio-require-leading-space="true"
class="editor form-control"
id="{{'htmlContent' + $index}}"
ng-model="htmlContent">
</div>
<mentio-menu ng-if="item"
mentio-for="'htmlContent' + $index"
mentio-trigger-char="'#'"
mentio-items="people"
mentio-search="searchPeople(term)"
mentio-select="getPeopleText(item)"
></mentio-menu>
</div>
The ID of the element is the way to connect the mentio directive to its menu when it's specified externally. If you only have one trigger char, one way you can work around this is just to move mentio-items, mentio-search and mentio-select on to the div. If you have more than one trigger character, then you need the separate specification.
FYI - A new version of ment-io was published: 0.9.12 that allows you to specify the ID of the mentio with the mentio-id field. This attribute can contain {{'htmlContent' + index}} and will evaluate appropriately without the need for an ng-if. See the ment.io project for details in the documentation.
http://jeff-collins.github.io/ment.io/#/documentation
You can directly edit the ID of the element via a directive on which you just add the id on the "elem" received as parameter (link stage).
Make sure mentio-menu triggers its init after your directive compilation (directive priority: ...).
So i need to know the extras of a car than a user wants to include in his preferences.
I'm trying to create input checkboxes from an array obtained by an ajax request and generate the inputs by ng-repeat. The major objective is to know the checkboxes selected by the user. I'd like that my approach to be create an auxiliar array which contains the selected ones, but i don't know how to set a unique ng-model to every item in the ng-repeat iteration so i can know the list of selected items. I guess there is something left in my knowlege of angular. Here is what i have for now..
In the controller...
$http.get('/ajax/ajax_get_extras/'+$scope.car.version+'/false').success(function(data) {
$scope.extras = data;
});
$scope.addExtra = function(){ // ... manage the auxiliar array }
In the html ...
<div ng-controller="Controller">
<form novalidate class="simple-form">
<span ng-repeat="extra in extras">
<input type="checkbox" ng-model="extra.id" ng-change="addExtra()" name="extra_{{extra.id}}" >{{extra.name}} - <strong>{{extra.real_price | onlynumber | currency}}</strong>
</span>
</form>
</div>
And i'm stuck since the extra.id doesnt transform to the real extra.id and stays as a string "extra.id" >_<
I tried extra_{{extra.id}}, extra.id, {{extra.id}}, $index as posibles ng-model and none works.
In AngularJS 1.1.5 there is "track by" that you can use in ngRepeat.
So you can:
<input type="checkbox" ng-repeat="e in extra track by $index" ng-model="extra[$index]">
Here is a example: http://plnkr.co/edit/6lNo6R5EPsNGHUU6ufTE?p=preview