I've setup a JSbin to show an issue I'm having with a polymer select box not reflecting the model (initially), however, the model does get updated after selecting an option. Note that in my example, I'm ensuring the model is loaded after the select options are populated, however, I guess the tricky thing here is that the select box population is a nested dom-repeat (thus when module is populated, the nested dom-repeat for the 'select' must be re-populated - I'm guessing).
Here's the bin and how to test it to show the dilemma.
http://jsbin.com/xucavi/edit?html,console,output
After page loads, note there are no selections made in the 2 select boxes. Click the 'Display Values from Model' button. Note that the values show the model has values. Select 'Digital' for each of the 2 select boxes. Now click the 'Display Values from Model' button again - and note that model has been updated.
Any thoughts on how to work around this? Thanks
You need to compute the value for the selected attribute of the option elements.
Modify the outer dom-repeat to bind the actual books to the property book instead of item. Now, binding the selected attribute to a _computeSelected(item, book) function makes it possible to dynamically calculate the selected book type:
<option value='{{item.id}}' selected$='[[_computeSelected(item, book)]]'>{{item.type}}</option>
The implementation of the function itself is quite simple:
_computeSelected: function(item, book) {
return item.id === book.typeId;
}
Working example of your JS Bin:
http://jsbin.com/sodugigubo/edit?html,console,output
For a more in depth explanation, read about computed binding and attribute binding.
Warning: Be aware that Polymer dom repeat is not working for Select Option in IE.
Related
I have a table with variable number of records (could be up to hundreds) where its body is build with one ng-repeat.
Within each record, there are two input fields of type select where their contents is also built using ng-repear and the number of options for each is about 100.
This is working right now, except that it takes a lot of time for the page to be built (several seconds; I guess due to the large number of html records that AngularJS is adding to the DOM).
Here is an example of one of the selects:
<select class="form-control" ng-model="One_Source.Measuring_Method_Code">
<option ng-selected="{{One_Method.Value == One_Source.Measuring_Method_Code}}"
ng-repeat="One_Method in All_Collections.Parameters_Test_Methods"
value="{{One_Method.Value}}"
title="{{One_Method.Test_Method_Name}} | {{One_Method.Method_Internal_Name}}">
{{One_Method.Value}}
</option>
</select>
Two questions:
Is there a simple way to speed up the page building process?
As shown in the example, each option in the list has a title clause displaying a detailed description of the option's meaning. How can I add a title to the select showing the description of the current value?
For the first question I was thinking about building the list of options for each select element only upon clicking on it, but I'm not sure if that would be the best way to do it.
Try using one time bindings so that Angular doesn't watch the value by prefixing it with ::. It can also be more efficient to use track by in your ng-repeat if each row has a unique value, like an ID.
<option
ng-selected="{{One_Method.Value == One_Source.Measuring_Method_Code}}"
ng-repeat="One_Method in All_Collections.Parameters_Test_Methods track by One_Method.id"
value="{{::One_Method.Value}}"
title="{{::One_Method.Test_Method_Name}} | {{::One_Method.Method_Internal_Name}}"
>
{{::One_Method.Value}}
</option>
If you still can't gain the performance you're expecting from #doublesharps's answer, you will have to implement one of the following:
You could build a custom list that has a 'load more' button which would destroy say the first '50' options and load the next 50.
A better option would be to turn this into an autocomplete, where the user searches for values.
Virtual repeat - Something angular material does really well, it constantly draw's and re-draws new elements based on the scroll position inside the element.
Other resources:
http://blog.scalyr.com/2013/10/angularjs-1200ms-to-35ms/
https://github.com/stackfull/angular-virtual-scroll
http://klajd.github.io/angular-virtual-repeat/#/Home
I found a PARTIAL SOLUTION that still needs to be polished but is quite promising.
During creation of the page, I do not make use of ng-repeat for the options but instead deploy a single option with the value received for the field from the database (if any, otherwise the select element is left blank).
When the user clicks on the select element a $scope function is invoked that checks the number of options within the select element and, if less or equal to 1, the inner HTML of this select element is re-generated and deployed.
Though clicking on all these select in the page will take (accumulative) a comparable time as when built upon load, this time is distributed over several events (the user clicking on all the select elements) and hence it is not perceived by the user.
Now, by polishing I mean that there is a strange behavior. In order to see the generated list of options, I need to click on the select twice. Will keep investigating this and post the solution (hoping I find one).
I am just trying to implement a simple drop down and here is my code
<select ng-change="selectTestSuite();" ng-model="testCase" ng-options="testSuite.TEST_NAME for testSuite in publicTestCase"></select>
In the controller when I am trying to print value of testCase in console it is giving undefined. But When I try to print id of testCase using
{{testCase.TEST_ID}}
It is giving me id. I have also checked by using $watch
$scope.$watch('testCase',function() {
console.log($scope.testCase);
});
Unable to figure out where I am making mistake.Appreciate any help.
I think no problem with ng-options.
Actually ng-options maps the "testSuite.TEST_NAME" as model to ng-model.
Ensure the "testSuite.TEST_NAME" is available in "publicTestCase" collection (Whether it is undefined).
You are binding the testCase to testSuite.TEST_NAME.
Your ng-options should look like this:
<select ng-change="selectTestSuite()" ng-model="testCase" ng-options="testSuite as testSuite.TEST_NAME for testSuite in publicTestCase"></select>
The model gets bind to the value of testSuite from the records in the publicTestCase array and for each of the testSuite you want the testSuite.TEST_NAME to be shown as the options text.
enter image description here
Note:- Please find the image link.image contains code
ng-repeat directive repeats a block of HTML code for each item in an array, it can be used to create options in a dropdown list, but the ng-options directive was made especially for filling a dropdown list with options, and has at least one important advantage:
Dropdowns made with ng-options allows the selected value to be an object, while dropdowns made from ng-repeat has to be a string.
I have developed my application using ExtJs 4.1. I have a combobox which gets populated using Ajax call. Once the comobox is populated, I need to find an item by name and then first the select event for that item.
The problem is the way combo-box is rendered by ExtJS. I am not sure how to select an item in the right manner. CombBox is not really a <select> element but a text input with a detached drop-down list that's somewhere at the bottom of the document tree.
I do not want to hard code the id's as ExtJS randomly generate the id.
This is how the generated HTML looks
You can check the example of ExtJs combobox here
Without testing, I would suggest,
var x = require("casper").selectXPath;
casper.thenClick(".x-form-trigger.x-form-arrow-trigger")
.wait(100)
.thenClick(x("//li[contains(#class,'x-boundlist-item') and contains(text(),'Alaska')]"))
.wait(100, function(){
this.capture("screenshot.png");
});
You might also need to move the mouse into position before clicking. Use
casper.then(function(){
this.mouse.move(selector)
});
Since you have the ComboBox in a form, you could use the "name" property in the ComboBox definition and select it with:
Ext.getCmp("idOfThePanel").down('form').getForm().findField('name');
Another option, use the "reference" property. In this case I'm not sure which is the correct way to select the ComoBox:
Ext.getCmp("idOfThePanel").down('form').getForm().lookupReference('reference');
or
Ext.getCmp("idOfThePanel").lookupReference('reference');
I have a select control that I'm populating based on a list of objects:
<select data-ng-options="obj.QuestionText for obj in jumpToList track by obj.OrderNumber" data-ng-model="questionSelectionJumpTo"
data-ng-change="questionDDLChange(questionSelectionJumpTo)" id="ddlJumpTo"></select>
In my controller, I'm setting the default value when the modal that contains the drop down list appears by setting questionSelectionJumpTo like this:
$scope.questionSelectionJumpTo = $scope.jumpToList[someIndexNumber];
This works correctly.
As long as I change the value via the controller, such as when I call a function from a button, and I set $scope.questionSelectionJumpTo, it correctly updates the drop down list to show the appropriate option.
However, when I manually change the drop down list by selecting one of the options, the controller can no longer set the selected option using $scope.questionSelectionJumpTo.
Any ideas on what might be causing this? Thanks for the assist!
In ExtJS I have something rather weird with my combobox.
The combobox is populated but in some cases, all but the 2 first entries are removed.
If I stay on the same page and process a new item on this screen (thus the all fields and thus the combobox would be reloaded), the combobox is now completely populated however the remove function is runned.
The weird thing is that all items are in the combobox, but the only the items that didn't get removed are in fact selectable and clickable. If I would click any other item that is visible in the list, it just wouldn't do anything (even the combobox wouldn't collapse).
What could be the cause of this?
I know you guys want code but it's simple impossible to post code because the code at the company I work at is so huge and complex that there would be too much to paste in here. I'm just wondering if any of you guys have had something similar.
Also, a textbox is above the combobox. If you would fill in the textbox with a value from the combobox, the combobox would jump to the correct value. With the 2nd run (which I described above), if I would type a value that is visible in the combobox but unselectable, it would not jump to that value in the combobox. It seems that these values are only visible but that's it.
EDIT:
Some other weird behavior: if I click in the combobox (so you can actually type text) and press any button, the combobox will be magically transformed to the correct form. By this I mean that only the 2 first items are now visible. I do not have any listener that would do this on my combobox...
Perhaps a "refresh" of that combobox would be enough? However, this doesn't explain then why the combobox behaved that way in the first place. Got it in FF and IE.
Without the code, you say you cannot provide, I can only guess: See if you have idProperty defined for the model and if the idProperty matches one of the fields, if valueField of the combo is same as the value of idProperty and last if you receive records with unique ids from the server. The combo config should look similar to this:
Ext.define('ComboModel',{
extend:'Ext.data.Model'
,idProperty:'custId'
,fields:[
{name:'custId', type:'int'}
,{name:'custName', type:'string'}
]
});
Ext.define('ComboStore',{
extend:'Ext.data.Store'
,model:'ComboModel'
});
Ext.create('Ext.form.field.ComboBox',{
store:Ext.create('ComboStore')
,valueField:'custId'
,displayField:'custName'
});
Of course you would most likely need additional config options for the above classes. And custId must be unique for all combo store records.
In the end I got it solved by binding the store again to it's combobox. While debugging with Firebug, I saw that there were only 2 items in the store, and not all those that were visible.
A short example below:
var ddl = Ext.getCmp('DDL');
var ddlStore = ddl.store;
...
//some manipulation of the data here
...
ddlDocType.bindStore(ddlDocTypeStore);
The bindStore() function is not documented in the official docs...