使用 ng-repeat 和单选按钮时获取 `undefined`

Question

我在 Bootstrap UI 模态上使用 Angular 的 ng-repeat 时遇到奇怪的行为。

我的 customerService.js 工厂中有这个虚拟方法：

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

这是 customerSelectionModal.html 模态模板：

<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>

这是 customerController.js 文件：

'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());
            });
        };

    }]);

最后是模态形式的 modalInstanceController.js 控制器：

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');
        };
    });

最初显示模态对话框时，我 You have selected: {"item":{"name":"Terry Tibbs"}} 正确显示，因为这是默认客户 select 由 modalInstanceController 控制器编辑。但是，当我 select 一个客户时，我得到 You have selected: {"item":"{\"name\":\"Terry Tibbs\"}"} 并单击 OK 按钮只会在警报中显示 undefined window 我也不知道为什么。

唯一可能的线索是，当客户被 select 编辑 name 属性并且出于某种我没有的奇怪原因使用 \ 转义了它的值一直想不通

有人知道这里发生了什么吗？

最后，是否可以将单选按钮设置为 selected 客户，因为它不会 selection 反对客户？

我正在使用以下内容：

AngularJS v1.3.9 推特Bootstrap v3.3.1 Angular UI Bootstrap v0.12.0

Answer 1

无论如何，在单选按钮中，尝试使用 ng-value 而不是 value 属性。

使用 ng-repeat 和单选按钮时获取 `undefined`

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

angularjs

angular-ui-bootstrap

twitter-bootstrap-3