CODEWITHSUNDEEP
angularjstwitter-bootstrap-3angular-ui-bootstrap
Intrepid
Intrepid

Reputation: 2831

Getting `undefined` when using ng-repeat and radio buttons

I am encountering a strange behavior when using Angular's ng-repeat on a Bootstrap UI modal.

I have this dummy method in my customerService.js factory:

app.factory('customerService', [ function() {
    customerFactory.getCustomers = 
     function () {
        return [{ "name": "Terry Tibbs" }, 
                { "name": "Bobby Halls" }, 
                { "name": "Garry Brisket" }]
    };
    return customerFactory;     
}]);

This the customerSelectionModal.html modal template:

<div>
    <div class="modal-header">
        <h3 class="modal-title">Select a customer</h3>
    </div>
    <div class="modal-body">
        <label data-ng-repeat="cust in customers">
            <input name="customer" type="radio" value="{{cust}}" ng-model="$parent.selected.item" />{{cust.name}}
        </label>
        <div ng-show="selected">You have selected: {{ selected }}</div>
        <div ng-show="selected">name: {{ selected.item.name }}</div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="ok()">OK</button>
            <button class="btn btn-default" ng-click="cancel()">Cancel</button>
        </div>
    </div>
</div>

This is the customerController.js file:

'use strict';

appModule.controller('customerController',
    ['$scope', '$modal', '$log', 'customerService', function ($scope, $modal, $log, customerService) {

        $scope.customers = customerService.getCustomers();

        $scope.selectCustomer = function () {
            var modalInstance = $modal.open({
                templateUrl: paths.templates + 'customerSelectionModal.html',
                controller: 'modalInstanceController',
                resolve: {
                    customers: function () {
                        return $scope.customers;
                    }
                }
            });

            modalInstance.result.then(function (selectedItem) {
                $scope.customerName = selectedItem.name;
            }, function () {
                $log.info('Modal dismissed at: ' + new Date());
            });
        };

    }]);

Finally the modalInstanceController.js controller for the modal form:

app.controller('modalInstanceController',
    function ($scope, $modalInstance, customers) {

        $scope.customers = customers;

        $scope.selected = {
            item: $scope.customers[0]
        };

        $scope.ok = function () {
            alert($scope.selected.item.name);

            $modalInstance.close($scope.selected.item);
        };

        $scope.cancel = function () {
            $modalInstance.dismiss('cancel');
        };
    });

When the modal dialog is displayed initially I get You have selected: {"item":{"name":"Terry Tibbs"}} displayed correctly as this is the default customer selected by the modalInstanceController controller. However, when I select a customer I get You have selected: {"item":"{\"name\":\"Terry Tibbs\"}"} and clicking the OK button just displays undefined in the alert window and I don't know why.

The only possible clue is when a customer is selected the name property and it's value are escaped using a \ for some odd reason that I haven't been able to figure out.

Has anyone any clue as to what's going on here?

Lastly, is it possible to set the radio button to the selected customer as it doesn't put a selection against the customer?

I am using the following:

AngularJS v1.3.9 Twitter Bootstrap v3.3.1 Angular UI Bootstrap v0.12.0

Upvotes: 1

Views: 1385

Answers (1)

Giulio Molinari
Giulio Molinari

Reputation: 132

Anyway, in the radio button, try to use ng-value instead value attribute.

Upvotes: 3

Related Questions