16

I have a simple select element that I am trying to enforce a value being present to submit the form and I have tried both setting the required attribute as well as using ng-init to ensure there is a value selected and both fail.

I am using ng-options to create a list of values from an array of Objects that have a ref property. Then I would like to use ng-init to set the shown value to the first Object.ref in the array.

<select name="refmarker" class="input-block-level form-width-adjust" ng-model="model.refmarker" ng-options="rm.ref for rm in refmarkers" ng-disabled="editable" ng-init="model.refmarker='refmarkers[0].ref'" required></select>

I have tried the following without any luck

ng-init="model.refmarker='refmarkers[0]'"
ng-init="model.refmarker='refmarkers[0].ref'"
ng-init="model.refmarker='rm.ref'"

Also the required attribute doesn't work ? Is the angular select element buggy or am I doing something wrong?

Mohamed Yakout
  • 2,868
  • 1
  • 25
  • 45
simplesthing
  • 3,034
  • 3
  • 15
  • 16

1 Answers1

28

required will only work in side a form element.

What you want is ng-init="model.refmarker=refmarkers[0]"

<!doctype html>
<html lang="en" data-ng-app="app">
<head>
    <meta charset="utf-8">
    <title>Test</title>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js"></script>
    <script type="text/javascript">

        angular.module('app',[])
                .controller('Main',function($scope)
                {
                    $scope.model = {};
                    $scope.refmarkers = [{ref:'abc'},{ref:'def'},{ref:'ghi'}];
                });
    </script>
</head>
<body ng-controller="Main">
{{'Angular'}}
<select ng-model="model.refmarker" ng-options="rm.ref for rm in refmarkers" ng-init="model.refmarker=refmarkers[0]"></select>
{{model.refmarker}}
</body>
</html>
Noishe
  • 1,411
  • 11
  • 14
  • 6
    This answer does work, however using ng-init is not considered a very good practice. Model initialization should happen in the controller. – Daniel Tabuenca Jan 03 '14 at 09:46
  • Thanks Noishe, the example you have given does work, but for some reason that is not working in my app?!! I think the only difference is that in my app the refmarkers array is dynamically created, so maybe it can't init to the first value in the array since it isn't created until the step directly before this select element in the form. I had used ng-repeat to populate the drop down before and I was able to init to a value, when I switched to ng-options I lost the init value. – simplesthing Jan 03 '14 at 17:54
  • dtabuenc - How would initialize the model to have a value selected from the controller? – simplesthing Jan 03 '14 at 17:56
  • just move the ng-init into the first line of the main controller. – Noishe Jan 04 '14 at 01:56
  • 1
    You're correct that the reason is because you are populating the list later. At the time the init line is executed, model.refmarker == undefined, so the select gets set to undefined, which isn't a valid option, hench the blank space. – Noishe Jan 04 '14 at 01:58
  • Thanks again Noishe I will try setting this in the controller if possible. – simplesthing Jan 07 '14 at 01:33