3

I have a little issue with a HTML select with AngularJS. When I do a petition to my API I get one of the values as an integer, but when I try to autofill a select with it I can't set de "value" correctly.

In this picture you can se what the HTML is receiving and the values that I want to set

Example of code

Are there any way to cast this value?

Thanks in advance :)

EDITED:

The controller to get customer data and fill the form

.controller('CustomerDetailCtrl', ['Customer', '$scope', '$sessionStorage', '$stateParams', '$ionicPopup', function (Customer, $scope, $sessionStorage, $stateParams, $ionicPopup) {
    if ($sessionStorage.auth) {
        Customer.get({data: $stateParams.customerId + '_' + $sessionStorage.user_id}).$promise.then(function (data) {
            if (data.response && $sessionStorage.role === 1) {
                $scope.customer = data.response[0];

                if (data.history) {
                    $scope.histories = data.history;
                }
            } else {
                console.log('Error de accesso...');
            }
        })
    }

    $scope.addTask = function (customer) {
        alert('add task!');
    }

    $scope.deleteTask = function (customer, history) {
        alert('delete task!');
    }
}])

The form:

<label class="item item-input item-select">
    <div class="input-label">
        Cliente avisado?
    </div>
    <select name="informed" ng-model="customer.informed" required>
        <option value="0">NO</option>
        <option value="1">SI</option>
    </select>
 </label>

And here a picture of the data from de API: enter image description here

2
  • 2
    Can you show us the code and not a screenshot? Commented Mar 16, 2016 at 16:59
  • Edited with more info Commented Mar 16, 2016 at 17:06

2 Answers 2

1

I know that you've already received an answer on this, but I wanted to show you one other potential option that doesn't involve having to change your data from an int to string. If you define the options for your select in your controller (or in a service if this will be used in multiple different places throughout your app) then you can take advantage of ng-options and its ability to use a value other than a string.

Here's an example (obviously I've hardcoded some things and put this all in a single module - not something you'd do in a real app).

JS:

angular.module('app', [])
.controller('ctrl', function($scope){
    // select options (if these are common maybe store them in a service
    // so you can share them in many controllers without duplicating the code)
    $scope.selectOptions = [
    {
        text: 'NO',
        value: 0
    },
    {
        text: 'SI',
        value: 1
    }];
    // sample data
    $scope.customer = {
        address: 'San Rosendo 11',
        date: '2016-03-16T16:19:13+0100',
        email: 'Montes',
        equipment: 'PC',
        id: 262,
        informed: 1,
        lastName: 'Montes',
        location: 'Tienda',
        name: 'Juanma',
        notes: '',
        pass: 'no tiene',
        phone: '900112233',
        price: '0',
        status: 'Pendiente',
        tasks: 'dfsdf'
    }; 
});

HTML:

<div ng-app='app' ng-controller='ctrl'>
    <select ng-model='customer.informed' ng-options='option.value as option.text for option in selectOptions'></select>
</div>

jsFiddle

Sign up to request clarification or add additional context in comments.

1 Comment

Ok. I appreciate that and I'll also try this solution :)
0

Define a default value somewhere in your controller: $scope.customer.informed = "NO";

5 Comments

But if I do that and the API response is 1 ("SI") the form will not show the correct value.
The point is that you must set a default value to what is bind in ngModel - You can define the logic yourself by checking what the value should be in the controller - but it must be "SI" or "NO"
Ok. I fixed it by casting the integer value in the controller :) $scope.customer.informed = data.response[0]['informed'].toString(); Thanks for your help!
Oh, yes - didn't noticed that the values are "0" and "1". Sorry about that
No problem. I saw the light with your answer but changing the "NO" with the number :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.