1

I am trying to use ng-repeat to iterate through an array of keys and display the scenario value associated with each key. The view code worked when the key value was hardcoded. Now that ng-repeat provides the key, the input field does not initially display the associated scenario value. I am using AngularJS 1.2.21.

This is the controller code that sets up $scope:

$scope.keys = KEYS; // array of strings
$scope.scenario = scenario; // object containing key: value pairs

This is the view code that generates the input:

<form name="gameSettingsForm" novalidate ng-submit="validateAndSaveSettings()" class="form-horizontal" role="form">
    <div class="row">
        <div class="col-md-6">
            <div class="form-group" ng-repeat="key in keys">
                <div class="col-md-3">
                    <input type="number" required ng-disabled="readOnly" class="form-control"
                           ng-model="scenario[key]"
                           id='{{key}}' name='{{key}}'>
                    <p>input contains {{scenario[key]}}</p>
                </div>
            </div>
        </div>
    </div>
</form>

When the page loads, the input field is empty even though the "input contains" text correctly displays the scenario[key] value. How do I get the value to display in the input field when the page loads?

UPDATE: I had commented out all but one of the KEY array items. After activating them, most of the generated input fields are empty when the page loads. However some of them populate when the page loads. All the "input contains" strings always correctly display their scenario[key] values.

WORK AROUND: Realized the scenario values that were displayed had been modified via multiplication. Made the problem go away by multiplying all scenario values by 1 before displaying.

softweave
  • 1,455
  • 2
  • 16
  • 27
  • 1
    From where do you get `scenario` Object? – Maxim Shoustin Aug 07 '14 at 19:35
  • can you post the process? you load data by async way. – Maxim Shoustin Aug 07 '14 at 20:22
  • The data load is resolved before the controller is invoked. As stated in the problem description, all values are displayed on the page -- just not in every input field. – softweave Aug 07 '14 at 22:36
  • Could you create a plunkr? – Will Aug 08 '14 at 05:33
  • Unrelated to your question, but note that using interpolation in the name attribute (`name="{{...}}"`) will fail to register the inputs properly with the parent form. Thus you might run into unexpected behaviour if you try to validate the fields. Take a look at this answer for more info and a possible fix: http://stackoverflow.com/questions/23616578/issue-registering-form-control-with-interpolated-name#answer-23617401 – gkalpak Aug 08 '14 at 13:38
  • Thanks for the head up on the name attribute. Final validation is done on the submit, so I removed this attribute from the view. – softweave Aug 08 '14 at 14:28

1 Answers1

0

The solution is to make sure the model values are numbers for inputs with type "number". I did this via multiplication:

value = value * 1;

I created a stand alone example that demonstrates the issue occurs when model values are not numbers: http://plnkr.co/qnFHafmIOWVW6eWkQsmk

softweave
  • 1,455
  • 2
  • 16
  • 27