Question

在Bootstrap UI模式上使用Angular＆＃39; 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"}}，因为这是默认客户由modalInstanceController控制器选择。但是，当我选择客户时，我会You have selected: {"item":"{\"name\":\"Terry Tibbs\"}"}点击OK按钮，只会在提醒中显示undefined 窗口，我不知道为什么。

唯一可能的线索是，当客户被选中name属性并且使用\转义了它的价值时出于某种奇怪的原因我无法使用{{1}}弄清楚。

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

最后，是否可以将单选按钮设置为所选客户，因为它没有针对客户进行选择？

我使用以下内容：

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

Answer 1

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

使用ng-repeat和单选按钮时，“未定义”

1 个答案: