Question

我使用AngularUI bootstrap $ uibModal服务创建了一个popup drop dow来替换原始的select表单元素。

angular.module('myApp', [
    'ui.bootstrap'])
    .controller('myController', function ($scope) {
    $scope.cities = ['Shanghai', 'Beijing'];
    $scope.basicInfo = {
        city: 'Shanghai'
    };

    $scope.updateCities1 = function () {
        $scope.cities.pop();
        $scope.cities.push('New York');
    }

    $scope.updateCities2 = function () {
        $scope.cities = ['Taipei', 'Hong Kong'];
    }
})
    .directive('popupDropDown', ['$uibModal', function ($uibModal) {
    var dropDownTemplate = '<div class="modal-header">' +
        '    <h3 class="modal-title">Please Select</h3>' +
        '</div>' +
        '<div class="modal-body">' +
        '    <button class="btn btn-block" ng-class="{\'btn-primary\': item===selected}" ng-repeat="item in items" ng-click="select(item)" ng-if="!cols">{{item}}</button >' +
        '    <div class="row no-padding" ng-if="cols===12">' +
        '        <div class="col-xs-1 text-center no-padding" ng-repeat="item in items">' +
        '            <button class="btn btn-lg no-padding" ng-class="{\'btn-primary\': item===selected}" ng-click="select(item)" >{{item}}</button >' +
        '        </div>' +
        '    </div>' +
        '    <div class="row no-padding" ng-if="cols===6">' +
        '        <div class="col-xs-2 text-center no-padding" ng-repeat="item in items">' +
        '            <button class="btn btn-lg no-padding" ng-class="{\'btn-primary\': item===selected}" ng-click="select(item)" >{{item}}</button >' +
        '        </div>' +
        '    </div>' +
        '    <div class="row no-padding" ng-if="cols===4">' +
        '        <div class="col-xs-3 text-center no-padding" ng-repeat="item in items">' +
        '            <button class="btn btn-lg no-padding" ng-class="{\'btn-primary\': item===selected}" ng-click="select(item)" >{{item}}</button >' +
        '        </div>' +
        '    </div>' +
        '    <div class="row no-padding" ng-if="cols===3">' +
        '        <div class="col-xs-4 text-center no-padding" ng-repeat="item in items">' +
        '            <button class="btn btn-lg no-padding" ng-class="{\'btn-primary\': item===selected}" ng-click="select(item)" >{{item}}</button >' +
        '        </div>' +
        '    </div>' +
        '    <div class="row no-padding" ng-if="cols===2">' +
        '        <div class="col-xs-6 text-center no-padding" ng-repeat="item in items">' +
        '            <button class="btn btn-lg no-padding" ng-class="{\'btn-primary\': item===selected}" ng-click="select(item)" >{{item}}</button >' +
        '        </div>' +
        '    </div>' +
        '</div>' +
        '<div class="modal-footer">' +
        '    <button class="btn btn-warning" type="button" ng-click="cancel();">Cancel</button>' +
        '</div>';

    return {
        restrict: 'A',
        require: '?ngModel',
        link: function (scope, element, attrs, controller) {
            var popupDropDownAttribute = scope.$eval(attrs.popupDropDown);
            var showPopupDropDown = function (evt) {
                var dropDown = $uibModal.open({
                    animation: true,
                    template: dropDownTemplate,
                    resolve: {
                        items: function () {
                            return popupDropDownAttribute.items;
                        },
                        cols: function () {
                            return popupDropDownAttribute.cols;
                        },
                        selected: function () {
                            return element.val();
                        }
                    },
                    controller: function ($scope, $modalInstance, items, cols, selected) {
                        $scope.items = items;
                        $scope.cols = cols;
                        $scope.selected = selected;

                        $scope.select = function (v) {
                            $modalInstance.close(v);
                        };

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

                dropDown.result.then(function (v) {
                    controller.$setDirty();
                    controller.$setViewValue(v);
                    controller.$render();
                });
            };
            element.attr('readonly', '');
            element.addClass('dropdown');

            element.on('click', showPopupDropDown);
        }
    };
}]);

这适用于静态项目，可以通过弹出或推送（在函数updateCities1中）更新项目，但是当我通过直接赋值更改项目的内容时（在函数updateCities2中），弹出窗口中的项目下拉列表没有更新。

有没有办法观察 AngularJs指令中的项目，以便第二种方式可行？或者当我想更改项目时，是否必须使用第一种方式更新它们？是否有任何快捷方式可以清除并将多个项目推送到原始数组中？

Answer 1

最后我明白了。

指令中有一个错误。在显示模态时应该获取popupDropDownAttrabute，因此，链接应该是：

<?php
    $quantity = JText::_('COM_VIRTUEMART_ORDER_PRINT_QTY');
    if($quantity > 1){
        echo '<th align="center" bgcolor="#EEEEEE" style="border: 1px solid #CCCCC; color:#FF0000">'.$quantity.'</th>';
    }else{
        echo '<th align="center" bgcolor="#EEEEEE" style="border: 1px solid #CCCCCC;">'.$quantity.'</th>';
    }
?>

如何在angularjs

1 个答案: