Develop Reference

ng-model scope not available while using with ng-options

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.

AngularJS model does not update after manual change of option

I have a problem with AngularJS model. Currently I have two select tags and I fill it by some async action then I just set select tag model by received data. Everything works well but if I change select tag (option) manually then model can't be changed anymore by this async actions - script keeps model picked by me manually - I am sure that I assign proper data to model from server response, because it works untill I don't change it manually...
<select ng-model="sModel" ng-change="changeAction(sModel)" name="sList" id="sList" ng-options="s.name for s in sList track by s.sId"></select>
(second select looks like above).
If someone have some idea why ngModel can't be updated after manual changes, please reply :)

You must be using ng model with direct variables. When using ngmodel with html input types use object types in ng model else value does not reflect.
$scope.req={value:""};
in html use
<select data-ng-model="req.value"></select>

Weird but I fixed it - It was because 'select' was wrapped by div which had ng-controller. Controller contains actually one action with change select option. After remove this ng-change it didn't help but removing whole controller declaration did..
<div ng-controller="sController">
<select ng-model="sModel" ng-change="changeAction(sModel)" name="sList" id="sList" ng-options="s.name for s in sList track by s.sId"></select>
</div>
Someone can explain me this anomaly ? ;/ Model always was changed in main/common controller (parent) where also was initially created.
http://jsfiddle.net/nkr33bo0/

Combobox Items unselectable

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...

KendoUI Switch control with AngularJS

I am trying to use kendo UI's switch control (http://demos.telerik.com/kendo-ui/web/mobile/switch.html) with angularjs. I am having problem that the value is not being bound with model. I am using it like this:
<input type="checkbox" id="locked" kendo-mobile-switch on-label="Yes" off-label="No" ng-model="Model.IsLocked" checked="{{Model.IsLocked}}" data-role="switch">
Basically the variable in model keep the value received from db irrespective of the state on UI.
Second problem I am having is with on and off labels that it keeps on displaying default On and Off.

I opened an issue on the github site and a fix was applied. See this link:
"I pushed a fix, it should work now if you use k-ng-model. The plain ng-model is still broken."
https://github.com/kendo-labs/angular-kendo/issues/333

The second problem (the on/off labels) is because it should be:
k-on-label="'Yes'" k-off-label="'No'"
Note the string literals, otherwise it is interpreted as a variable.

Angular model not updating

Hi I am trying to update the model based on the value of the radio buttons. I read that it might be something with $parent scope but I am unable to figure it out. I am fairly new to angular and still trying to understand scope. Any help is appreciated.
Code: I am tying the value of the radio buttons to the ng-model="amount" but they wont update at all. Here is my jsbin with my code. http://jsbin.com/zumuc/8/edit Thank you

Here we go: http://jsbin.com/lasesabu/1
http://jsbin.com/lasesabu/1/edit
Just using data.amount in place of amount. The difference is changing object content versus replacing object.