Hi,
Re: error message on same line.
Which error message do you mean ? Is it on the same horizontal as the input? IAC it looks to me as if it should be on the next row. If all else fails add a br :-}
Re: looping the array.
You could use jquery.grep() :
var item = $.grep($scope.metaData.modes, function (x) { return x.modeId === mode; })[0];But it might be a bit slower since it searches the whole array for multiple matches.
Re: make sure that non-0 value is selected
That's what the code I posted last time addresses.
>Hi Viv,
>
>I haven't come across $watch before, thanks a lot.
>
>This is my current code (I am a beginner in Angular):
>
>
> <div class="form-group">
> <label class="control-label col-md-3" title="Mode">Mode:</label>
> <div class="controls">
> <div class="col-lg-9">
> <select class="form-control" ng-model="currentSalespoint.mode" required name="mode" id="mode"
> ng-options="t.modeId as t.description for t in metaData.modes"
> ng-change="modeChanged(currentSalespoint.mode)"></select>
> </div>
> <div class="field-validation-error">
> <span ng-show="editSalespointGeneral.mode.$error.required && editSalespointGeneral.mode.$dirty">Mode is required.</span>
> </div>
> </div>
> </div>
> <div class="form-group">
> <label class="control-label col-md-3" title="Type Template">Type Template:</label>
> <div class="controls">
> <div class="col-lg-9">
> <select class="form-control" ng-model="currentSalespoint.typeTmplId"
> ng-options="s.groupId as s.groupName for s in metaData.salespointTypeGroups"></select>
> </div>
> </div>
> </div>
> <div class="form-group" ng-show="salespointMode.needsItemTree">
> <label class="control-label col-md-3" title="Item Tree">Item Tree:</label>
> <div class="controls">
> <div class="col-lg-9">
>
> <select class="form-control" name="itemTree" id="itemTree"
> ng-model="currentSalespoint.iTreeTop" ng-required="salespointMode.needsItemTree"
> ng-options="t.id as t.descrip for t in metaData.itemTrees"></select>
> </div>
> <div class="field-validation-error">
> <span ng-show="editSalespointGeneral.itemTree.$error.required && editSalespointGeneral.itemTree.$dirty">Item Tree selection is required.</span>
> </div>
> </div>
>
>And in the controller:
>
>
> $scope.modeChanged = function (mode) {
> setModeProps(mode);
> };
>
> var setModeProps = function (mode) {
> for (var i = 0; i < $scope.metaData.modes.length; i++) {
> var curMode = $scope.metaData.modes[i];
> if (curMode.modeId == mode) {
> $scope.salespointMode = curMode;
> break;
> }
> }
> };
>>
>This seems to work Ok in my tests and the controls are shown correctly.
>
>The only minor annoyance is that error message appears right next to the control instead of just bellow the control. Do you see how to adjust my HTML code to fix that?
>
>
>I am wondering how can I make use of the $watch instead of ng-change. I guess I would still need to loop through the modes since I bind mode to the view model property.
>
>I am not exactly sure how to not loop through the array. The modes come from another table
>
>
> defaultOption = {
> modeId: null, description: 'Select Mode...', abbreviation: '',
> needsItemTree: false, needsLocSuffix: false, needsItemTreeHeight: false,
> needsLookupMethod: false, needsPassNumberEntry: false,
> needsCashDrawerType: false, needsStickyList: false, needsCashThreshold: false,
> needsBillCountThreshold: false, needsBalanceTransferAssist: false
> };
> $scope.metaData.modes.splice(0, 0, defaultOption);>
>My currentSalespoint has mode property. So, when I select mode in the drop down, is there a simpler way to find the corresponding object in the
>
>metaData.modes in order to find all these extra properties without looping through it?
>
>I am also running into this problem
>
>
http://stackoverflow.com/questions/25943406/extra-option-and-ng-required>
>How can I make sure that non-0 value is selected?
>
>Thanks in advance.
>
>>>I don't want to dynamically add or remove option. I want this option to always be there, but somehow make sure that another option is selected when it's required. I don't think we need a directive, I think we can go with a form's code.
>>
>>As a user I'd find it extremely annoying to have a selectable item in the dropdown and then be told I shouldn't select it. Something like this (don't think I have your model named correctly but....) would add or remove the zero option when necessary:
<!DOCTYPE html>
>><html data-ng-app="MyApp">
>><head>
>> <meta name="viewport" content="width=device-width" />
>> <title>Index</title>
>></head>
>><body data-ng-controller="myCtrl">
>> <div>
>> <select data-ng-model="selectedSalespoint"
>> data-ng-options="s.name for s in metaData.salesPoint">
>> </select>
>> <select data-ng-model="selectedItemTree "
>> data-ng-options="s.Descrip for s in metaData.itemTrees">
>> </select>
>> </div>
>></body>
>>
>><script src="~/Scripts/angular.js"></script>
>><script type="text/javascript">
>> var app = angular.module('MyApp', []);
>>
>> app.controller('myCtrl', ['$scope', function ($scope) {
>>
>> $scope.metaData = {
>> salesPoint: [{ name: 'A', ItemTreeRequired: true }, { name: 'B', ItemTreeRequired: false }],
>> itemTrees : [{ id: 0, Descrip: 'Select Item Tree....' },{ id: 1, Descrip: 'One' }, { id: 2, Descrip: 'Two' }]
>> };
>> $scope.selectedSalespoint = null;
>> $scope.selectedItemTree = null;
>>
>>
>> var zeroIsOn = true;
>> $scope.$watch('selectedSalespoint', function (newValue, oldValue) {
>> if (newValue === null) return;
>>
>> if (newValue.ItemTreeRequired && ! zeroIsOn) {
>> $scope.metaData.itemTrees.splice(0, 0, { id: 0, Descrip: 'Select Item Tree....' });
>> zeroIsOn = true;
>> }
>> else {
>> if (zeroIsOn && ! newValue.ItemTreeRequired) {
>> $scope.metaData.itemTrees.splice(0, 1);
>> zeroIsOn = false;
>> }
>> }
>> });
>> }]);
>></script>
>></html>Using your approach you'd need something like:
$scope.$watch('selectedItemTree', function(newVal, oldVal) {
>> if (! $scope.selectedSalespoint.ItemTreeRequired && newVal.id === 0) {
>> alert('Cannot choose that one');
>> }
>> });(and also need to watch selectedSalespoint changed and make sure the zero option wasn't currently selected......)
