Title

Tuesday, 20 January 2015

angularjs select ng-click event does not expand the control


I am trying to dynamically load the optionset of select tag on ng-click event. clicking on expand arrow fires ng-click event. Since I fetch the data at that point and bind to the select control, angularjs omits the expand event somehow, select does not expand. User has to click on the arrow one more time to see the results of the dynamically loaded options.

How can I ensure to expand the select correctly in one click while loading the options?

I tried to find a way to dynamically expand the select when the load is complete, but afaik there is no cross browser way of achieving that.

Here is the code, onclick retrieve method is being called to fetch and bind the data to the select. But click does not expand the control...

<div style="position: relative;">   <input type="text" class="inputTextFieldCell"   style="width: 215px; position: relative; top: 0; left: 0; z-index: 2; padding: 0; margin: 0;"   ng-model="subscriptionResource.Value" />     <select class="optionsCellInput selectTextFieldCell"   style="width:240px;position: absolute; top: 0; left: 0; padding: 0; margin: 0;"   ng-click="resources.retrieve(subscriptionResource, $event)"   ng-model="item" ng-options="resource as resource.Serial for resource in subscriptionResource.resource"   ng-change="selectChange(subscriptionResource, item)" >   </select>  </div>

Javascript:

$scope.resources = {   retrieve: function (resource, event) {   if (resource.resourceList == null) {   var reqDataRetrieveResources = { "request": null };   reqDataRetrieveResources = window.createRequest(window.definitions.messages.RetrieveResourceRequest, reqDataRetrieveResources);   reqDataRetrieveResources.request["ResourceType"] = 1;   reqDataRetrieveResources.request["SearchCount"] = 5;     $http.post(window.definitions.url, reqDataRetrieveResources).success(function (result) {   if ((result.d !== null) && (result.d.Resources !== null)) {   resource.resourceList = result.d.Resources;   return true;   }   });     return true;   }   }  }
Answer

Try to use ng-mousedown instead of ng-click. If it don't works, try to call $scope.$aply after bind your data.

No comments:

Post a Comment