I have an md-autocomplete component from AngularJS Material and it does not show the dropdown with the options after first click in the input, as it is supposed to shown. It shows the full list of options in the dropdown when I click on input after I've done a search and then delete the entered input. Can anyone tell what is wrong in my code?
Here is my code:
I tried the md-min-legth attribute but it does not work.
<md-autocomplete ng-disabled="false"
md-no-cache="true"
name="projectAutocompleteFormRecord"
md-selected-item="model.TimeRecord.Project"
md-items="project in querySearchForProjectRecord(searchProjectTextRecord)"
md-item-text="project.Code + (project.DerivedCode ? project.DerivedCode : '') + '-' + project.Title"
md-search-text="searchProjectTextRecord"
md-min-length="0"
placeholder="Project">
<md-item-template>
<div class="item-title">
<span md-highlight-text="searchProjectTextRecord"
md-highlight-flags="ig">
{{project.Code + (project.DerivedCode ? project.DerivedCode : "") + "-" + project.Title}}
</span>
</div>
</md-item-template>
</md-autocomplete>
<script>
// initialize of $scope.projs;
$scope.searchProjectTextRecord = "";
$scope.querySearchForProjectRecord = function (query) {
var results = [];
var projects = $scope.projs;
if (projects) {
results = query ? projects.filter(item => item.Code.toLowerCase().includes(query.toLowerCase()) ||item.Title.toLowerCase().includes(query.toLowerCase())) : projects;
}
return results;
}
</script>
I managed to fix it by adding the <md-not-found> element.
Related
I am having below data as input json,
"values":[
{"_attributes":{"name":"data.domain"},"_text":"${url}"},
{"_attributes":{"name":"data.port"}},
{"_attributes":{"name":"data.comments"},"_text":"Defaults Comments"},
{"_attributes":{"name":"data.concurrent"},"_text":4}]
]
I am showing comments in my html page using this directive,
<b style="padding-top:5px;"> Comments:</b>
<span class="input">
<input class="inputtxt" type="text" ng-repeat="x in ValueArr" ng-if="x._attributes.name == 'data.comments'" ng-model="x._text">
</span>
which is working fine and showing as expected. But the problem is that sometimes, the comments node
{"_attributes":{"name":"data.comments"},"_text":"Defaults Comments"},
may not be present in array. like this,
"values":[
{"_attributes":{"name":"data.domain"},"_text":"${url}"},
{"_attributes":{"name":"data.port"}},
{"_attributes":{"name":"data.concurrent"},"_text":4}]
]
In that case it shows only "Comments:" and blank screen after that. It does not show input box. In this case, I want to show empty input box. I tried ng-default and and ng-init but that didn't work. How to display input box for absence of matching condition ?
jsfiddle
Not getting any idea, how to achieve that. Please suggest something.
Thanks
The solution works with ng-init.
Just put it on the input like this:
<span class="input" ng-init="initValues()">
<input class="inputtxt" type="text" ng-repeat="x in values" ng-show="x._attributes.name == 'data.comments'" ng-model="x._text" ng-init="initInput(x)">
</span>
And add the function in the Controller:
$scope.initInputComments = function(x) {
if (!x._text || x._text == "") {
x._text = "Defaults Comments"
}
}
Note that you need to test that x._text exists/is defined.
$scope.initValues = function() {
var containsComment = false;
for (var i = 0; i < $scope.values.length; ++i) {
if ($scope.values[i]._attributes.name == 'data.comments') {
containsComment = true;
}
}
if (!containsComment) {
$scope.values.push({
"_attributes": {
"name": "data.comments"
}
});
}
}
Check the working fiddle
I have a md-autocomplete field:
<md-autocomplete md-selected-item="videoInfo.lineUp[1]" md-items="item in searchQuery(searchText)" md-search-text="searchText" md-item-text="item.display"></md-autocomplete>
I populate md-items with
$scope.searchQuery = function (searchText) {
var users = [];
angular.forEach($scope.users,
function (value, key) {
// value = user object
// key = userId
var dN = value["display_name"];
if (dN) {
var obj = {};
obj[key] = value;
obj["display"] = dN;
if (dN.toLowerCase().indexOf(searchText.toLowerCase()) !== -1) {
users.push(obj);
}
}
});
return users;
}
It working in the sense that I can type in the input field and suggestions are loaded, however the dropdown is empty, i.e. it doesn't show display_name as I would have expected. When I select one of the options, the display_name of the selected item does show up in the input field. Any ideas what I could be doing wrong?
You need to define how you display information in the dropdown within the <md-autocomplete> tag. Here's an example - CodePen
Markup
<div ng-controller="AppCtrl as vm" ng-cloak="" ng-app="MyApp">
<md-autocomplete flex
md-selected-item="text"
md-no-cache="true"
md-items="item in vm.items()"
md-min-length="0">
<span id="autocompleteText" md-highlight-text="searchText">{{item}}</span>
</md-autocomplete>
</div>
https://material.angularjs.org/latest/demo/autocomplete
I'm using Angular Xeditable api.I need to change the text field's value according to the value of the drop down.But it's not working.Could you tell me why ? Thanks.
Html
<td>
<span editable-select="user.status" e-form="tableform" e-ng-options="s.value as s.text for s in statuses" e-ng-change="setName($data,user)">
{{ showStatus(user) }}
</span>
</td>
js
$scope.setName = function (id, user) {
var selected = [];
if (id) {
selected = $filter('filter')($scope.statuses, { value: id });
}
if (selected.length) {
user.name = selected[0].text;
}
};
Generated html : you can see that it has been changed text of the name filed as expected (status3).But it doesn't update the text box properly. In other words it doesn't show on the text box.Why ?
<td>
<!-- editable username (text with validation) -->
<span editable-text="user.name" e-form="tableform" onbeforesave="checkName($data, user.id)" class="ng-scope ng-binding editable editable-hide">
status3
</span><span class="editable-wrap editable-text ng-scope"><div class="editable-controls form-group" ng-class="{'has-error': $error}"><input type="text" class="editable-input form-control ng-pristine ng-valid" ng-model="$data"><div class="editable-error help-block ng-binding" ng-show="$error" ng-bind="$error" style="display: none;"></div></div></span>
</td>
UPDATE :
I have tried like this.But then it changes all the rows values.So how can I detect only the changed row ?
$scope.setName = function (id, user,form) {
var selected = [];
if (id) {
selected = $filter('filter')($scope.statuses, { value: id });
}
if (selected.length) {
for (var i = 0; i < form.$editables.length; i++) {
if (form.$editables[i].name === 'user.name') {
form.$editables[i].scope.$data ="sampath"
}
}
}
};
Here is the JsFiddle
I try with your old source code and it's works for me:
if (selected.length) {
user.name = selected[0].text;
}
May be i miss understand your problem.
http://jsfiddle.net/NfPcH/14573/
If I understand it right, you just want to update the text on the textbox (which is bound to the user's name) depending on the status change, right?
If so, then your UPDATED code is too complicated. Just update the property directly on the user object passed to the setName function (like in your first example). It is already bound to the textbox, so you don't have to go all the way around and update the textbox directly. That's the whole point of using angular. You update the models on the scope and the rest happens automatically.
$scope.setName = function (id, user) {
if (!id || !user) {
// Do something to handle this...
return;
}
var selected = $filter('filter')($scope.statuses, { value: id });
selected = selected.length ? selected[0] : null;
user.name = 'sampath (' + selected.text + ')';
};
Here is an udpated fiddle:
http://jsfiddle.net/NfPcH/14765/
I have a tooltip working on a glyphicon. When I click on the glyphicon I want to hide the tooltip, and then change the text of the tooltip. This reflects a change in state for the glyphicon which has been clicked.
However, when I hide the tooltip and then change the text of the tooltip, instead of doing it in this order, for a second you can see the new text in the tooltip before it disappears.
Here is the html:
<span class="glyphicon glyphicon-eye-open watch-eye"
ng-click="eyeClicked()" uib-tooltip="{{watchTooltip}}"
tooltip-placement="auto top" tooltip-is-open="eyeTooltipIsOpen">
</span>
And here is javascript:
$scope.watchingCategory = false;
$scope.watchTooltip = 'Watch';
$scope.eyeClicked = function() {
$scope.eyeTooltipIsOpen = !$scope.eyeTooltipIsOpen;
$scope.watchingCategory = !$scope.watchingCategory;
if($scope.watchingCategory === true) {
$scope.watchTooltip = 'Dont watch';
}
else if($scope.watchingCategory === false) {
$scope.watchTooltip = 'Watch';
}
};
I've created a plnkr to show exactly how it is working: http://plnkr.co/edit/myQlkkiSNO14td21Dv0M
Any ideas how to stop this behaviour? All help appreciated...
This is probably a problem whitin the uib directive.
A timeout solves the problem :
$timeout(function(){
$scope.watchTooltip = $scope.watchingCategory ? 'Dont watch' : 'Watch';
}, 200);
http://plnkr.co/edit/myQlkkiSNO14td21Dv0M?p=preview
Yes, this is very rare situation but somehow, if i use the autocomplete as follows, i get all the dom elements blocked and i cant interact anymore with an element from my page.
This is the html-part:
<md-autocomplete style="background-color:white; height:10px;"
md-selected-item="selectedItem"
md-search-text-change="searchTextChange(searchText)"
md-search-text="searchText"
md-selected-item-change="selectedItemChange(item)"
md-items="item in querySearch(searchText) | orderBy:'text'"
md-item-text="item.text"
md-min-length="0"
placeholder="Filteren op tag"
md-menu-class="autocomplete-custom-template">
<md-item-template style="background-color:white;">
<span class="select-title">
<!--<md-icon md-svg-icon="selectboxIcon.svg"></md-icon>-->
<span class="item-tags"> {{item.text}} </span>
</span>
</md-item-template>
</md-autocomplete>
and this is the corresponding parts from my controller:
$scope.querySearch = function (query) {
var results = query ? $scope.allTags.filter($scope.createFilterFor(query)) : $scope.allTags;
return results;
}
$scope.createFilterFor = function (query) {
var lowercaseQuery = angular.lowercase(query);
return function filterFn(item) {
console.log(item);
var itemName = angular.lowercase(angular.lowercase(item.text));
return (itemName.indexOf(lowercaseQuery) === 0);
};
}
$scope.searchTextChange = function searchTextChange(text) {
$log.info('Text changed to ' + text);
}
$scope.selectedItemChange = function selectedItemChange(item) {
console.log("selected");
console.log(item);
}
ps: every functionality works fine and without error. Just clicking the clear button - as shown in the following image- causes this problem -tested in last versions of chrome and mozilla-.
There is an issue posted on github regarding this.
You can check it out here.
It is resolved in the update 0.10.1-rc4.
Update your angular-material to master.
Temporary Workaround:
CSS:
.md-scroll-mask{
position: initial
}