I am using angular ui-select Selectize Theme. I want to disable search but would like to show place holder text so that user know what is this select field is used for.
I tried modifying selectize/match.tpl.html to
<div ng-hide=\"($select.open || $select.isEmpty())\" class=\"ui-select-match\" ng-transclude=\"\">{{$select.placeholder}}</div>
But this always rending as
<div ng-hide="($select.open || $select.isEmpty())" class="ui-select-match ng-hide" ng-transclude="" placeholder="Select or search a country in the list..."><span class="ng-binding ng-scope"></span></div>
How to modify template to show place holder text in Span/Div and show it by default.
Or is there any better way to disable search and show placeholder text ?
Example Plunker
i have created a wrapper directive over this and modifying inside a link line below
angular.element(angular.element($element[0])).find('span').text($scope.placeholder)
and again in controller
angular.element(angular.element($element[0])).find('span').text(scope.name)
I wrote a wrapper directive around this, updated match template like below, and using search-enable = false
$templateCache.put("selectize/match.tpl.html","<div class=\"ui-select-match\" ng-transclude=\"\"></div>");
using "link" in wrapper directive i am updating above template with palceholder text
angular.element(angular.element($element[0])).find('span').text($scope.placeholder)
using controller in wrapper directive, updating selected string
angular.element(angular.element($element[0])).find('span').text(scope.name)
I have modified select.tpl.html like below
$templateCache.put("selectize/select.tpl.html","<div class=\"selectize-control single\"><div class=\"selectize-input\" ng-class=\"{\'focus\': $select.open, \'disabled\': $select.disabled, \'selectize-focus\' : $select.focus}\" ng-click=\"$select.activate()\"><div class=\"ui-select-match\"></div><div class=\"ui-select-placeholder\" ng-hide=\"!$select.isEmpty()\">{{$select.placeholder}}</div><input type=\"text\" autocomplete=\"off\" tabindex=\"-1\" class=\"ui-select-search ui-select-toggle\" ng-click=\"$select.toggle($event)\" placeholder=\"{{$select.placeholder}}\" readonly ng-model=\"$select.search\" ng-hide=\"!$select.searchEnabled || ($select.selected && !$select.open)\" ng-disabled=\"$select.disabled\"></div><div class=\"ui-select-choices\"></div></div>");}]);
Which adds a div with placeholder when selection is empty. Else it will be hidden
Related
I have an angularjs template where some of the ngModel variable are empty. They are all attached to a html element.
I am very confused as to how to create an angularjs element that all this html elements would inherit so that
if a variable is empty or does not have anything inside its content then it should display a default content.
This is what i have done currently.
<h3 ng-bind="name">Student's name</h3>
<p ng-bind="description"> More about the programme</p>
<h2 ng-bind="title">Details about the programme for the whole years</h2>
So instead of this area been empty because there is nothing there I would want it to display the default text shown.
I think it is a drirective matter but I am not really that good with it
You can apply below simple solutions-
1. Set an expression to ng-bind
<h3 ng-bind="name || 'Student\'s name'"></h3>
<p ng-bind="description || 'More about the programme'"></p>
<h2 ng-bind="title || 'Details about the programme for the whole years'"></h2>
Note: Escape character "" is added in the default text
2. Use expression as element content instead of ng-bind, but ng-bind is the preferred option.
<h3>{{name || "Student's name"}}</h3>
<p>{{description || "More about the programme"}}</p>
<h2>{{title || "Details about the programme for the whole years"}}</h2>
3. Writing getters in the Component/Controller class of the directive for all these properties.
In the getter function, you can decide to return default values as fallback when values are not to these properties.
About creating parent element/directive: even if you create a generic directive, the default values are distinct for each use case. So you will end up writing more or less similar code to set default values to new element/directive.
Well I have a directive/component/controller i.e <app-form></app-form> I am using this html page into multiple place but I want to to remove some specific field from different in place component how can I do in angularjs
In reactjs we can do like this <app-form disableField></app-form> and if disabledField then disable particular field other wise nothing to do
Again for better understanding for example we have one form having name, email and dob same form is using multiple place but at one place we are not interesting to display dob how can we disable or remove from specific place ?
please guide
You have to use bindings in your component declaration. something on the lines of:
angular.module('app').component('appForm', {
controller: 'AppFormCtrl',
templateUrl: 'app-form.html',
bindings: {
disableField: "<", // use '<' to generate input on the component
}
});
then in your app-form.html you can access the input var using the $ctrl object:
<form>
<input ng-if="$ctrl.disableField == true" type="text"/>
</form>
And the you can pass whatever value you want in the scope of your root view:
<div>
<!-- displays the form input according to the passed property's value -->
<app-form disable-field="isFieldEnabled"></app-form>
<!-- displays the form input -->
<app-form disable-field="true"></app-form>
<!-- does NOT display the form input -->
<app-form disable-field="false"></app-form>
<!-- does NOT display the form input, as disableField is evaluated an NULL in the component instance -->
<app-form></app-form>
</div>
isFieldEnabled is the property in your root controller $scope that will control the enabling / disabling of the input field in your component, but you can simply pass true or false if no logic is used.
You can attach whatever property you want, it doesn't have to be a boolean (but in this case I think it makes sense).
Also, notice that when defining the binded property 'disableField' in the Javascript environment, we use camelCase. The same property will be defined in the view / html environment using kebab-case.
You can also check the following answer to see how to generate output from the component instances:
Angular.js, how to pass value from one component to any other
Unable to dynamically change class on "ng-repeat" list with background image contained in "style.css". Tried suggested solutions such as "ng-style="{ 'backgound-image': 'image_name.jpg' }" directly onto the element without much luck.
The class would need to change conditionally.
ng-class to the rescue. Managed to achieve the conditional effect without needing to modify my "style.css".
Within my template "ng-repeat (item in productList)" i used the following, note your repeat will need to use the "track by $index" syntax:
<div ng-class="{ 'no' : 'image_off', 'yes': 'image_on' }[item.isOn]" ng-click="switchOnOff($index, item.productId, item.isOn); $event.stopPropagation();"></div>
NOTE: "$event.stopPropagation()" prevents the page submitting.
"image_off/image_on" refers to two different classes under my stylesheet. Each with their own respective background image.
In your controller use the following to action the event on the UI inside a function e.g "switchOnOff" :
$scope.productList[index].isOn = $scope.productList[index].isOn == 'no' ? 'yes' : 'no';
I am using the angular-ui-select directive to create an auto-complete input field. I want to be able to click and focus the field without the dropdown options appearing. The Plunker example in the documentation works this way, but I cannot get mine to behave correctly. Please help.
Here is my code:
<ui-select ng-model="customer.selected" theme="bootstrap">
<ui-select-match placeholder="Start typing..">{{ $select.selected.family_name }}</ui-select-match>
<ui-select-choices repeat="customer in customers | filter: $select.search">
<div ng-bind-html="trustAsHtml((customer.family_name | highlight: $select.search))"></div>
</ui-select-choices>
</ui-select>
Here is their Plunker example that is working the way I would like it to.
http://plnkr.co/edit/a3KlK8dKH3wwiiksDSn2?p=preview
I have a same issue. I want to be able to click and focus the field without the dropdown options appearing.
Here I am sharing my solution. May be it will help someone. I made changes in Selectize theme example in plunker shared by #Corey Quillen. I had cleaned up other things so it will help.
1) Here first I had add reset-search-input="false" in ui-select directive. So it will not reset search input.
2) Then I had replaced filter with custom filter propsFilter. Which is already useing in Select2 theme. And put
if(!props.name.length){
return out;
}
in filter above If condition. In demo.js file.
So data return empty if no search text entered.
Here is the plunker example of that.
ui-select by default shows a dropdown, I dont think we can change that. But you can change its binding data. In the plunker example the ui-select is bind to model 'address.selected', which initially is empty, thus nothing pops up. But once you start typing the refresh will call the function refreshAddress() to populate the results into address. Once the results are populated, ui-select finds that its model(address) has data and start showing a dropdown. After you have searched for something, try to click on the textbox, it will still show you the result, beacuse they are still present in the model.
Since, you are trying it with a local variable I suppose, it is pre-populated with data for ui-select and hence it shows it. I think you should try to make a request in you code to get that data and use refresh and refresh-delay. If you dont have a web service and want to use local data, I would suggest bind the select to an empty model and put data into that using a custom function for refresh, you might have to write a custom search functionality into the refresh function, but you can use javascript's search() or indexOf() for that.
I'm trying to create a simple time picker directive. http://plnkr.co/edit/VYGqhPbHf1yqXLpemGEP
When user click on input field I want to display the content of my template html as a dropdown below the input (will take care of css later) so that user can select a time from the list. I'm not sure how to get hold of the template (something like angular.element(template).show())
Thanks!
Edit: I managed to come up with this: http://plnkr.co/edit/zAplNKVfohXLbIzwjhy4?p=preview
Everything works except when I click any of the list, it does not set the correct model value.
Try the following:
Embed the the HTML for the date picker list
Hide the list from the html
If the input gets focus change the visibility.
Pseudo code:
HTML:
<ul ng-show="listVisible">
<li> .... </li>
</ul>
JavaScript
scope.listVisible = false;
element.$on('focus', function() {
scope.listVisible = true;
});
Do something similar in reverse.
I managed to get it working. I had to create a new scope for the dropdown element. http://plnkr.co/edit/zAplNKVfohXLbIzwjhy4?p=preview