Question

我从Sqlite数据库返回对象，有时会为此对象的某些属性返回null。例如，（item.unit）在数据库中有时为null。

我在我的html文件中得到了这段代码

<td class="item-row-quote"><span class="quote-price-text" ng-model="row.dollarPerUnitText"
                                                 id="dollarPerUnit">{{ '$/' + item.unit }}</span></td>

如何确保浏览器不显示item.unit而不显示null。

这是我的控制器代码

angular.module('canex')
.controller("QuoteController", ['$scope', '$routeParams', '$location', 'ProjectService', 'QuoteService', 'UploadService', 'ClientService', 'ItemService', 'ConditionService',
    function ($scope, $routeParams, $location, projectService, quoteService, uploadService, clientService, itemService, conditionService) {
        $scope.clientId = $routeParams.clientId;
        $scope.projectId = $routeParams.projectId;
        $scope.quoteId = $routeParams.quoteId;
        $scope.IMG_URL = uploadService.getImageUrl();
        $scope.quoteDate = new Date().getFullYear().toString().substr(2, 2);
        $scope.items = [];


        function _fetchQuote() {
            quoteService.getQuote($routeParams.quoteId)
                .then(function (response) {
                    $scope.quote = response.data;
                }, $scope.httpErrorCallback);
        }

        function _fetchItems() {
            itemService.getQuoteItems($routeParams.quoteId)
                .then(function (response) {
                    $scope.items = response.data;
                }, $scope.httpErrorCallback);
        }

        function _fetchConditions() {
            conditionService.getQuoteConditions($routeParams.quoteId)
                .then(function (response) {
                    $scope.conditions = response.data;
                }, $scope.httpErrorCallback);
        }


        function _fetchClient() {
            clientService.getClient($routeParams.clientId)
                .then(function (response) {
                    $scope.client = response.data;
                }, $scope.httpErrorCallback);
        }

        function _fetchProject() {
            projectService.getProject($routeParams.projectId)
                .then(function (response) {
                    $scope.project = response.data;
                }, $scope.httpErrorCallback);
        }


        $scope.addRow = function () {
            $scope.items.data.push({});
        };

        $scope.addCondition = function () {
            if (document.getElementById("condition-page").style.display == "none") {
                document.getElementById("condition-page").style.display = '';
            }
            $scope.conditions.data.push({})
        };

        $scope.removeRow = function (index) {
            var itemId = $scope.items.data[index].id;
            itemService.archiveItem(itemId);
            $scope.items.data.splice(index, 1);
        };

        $scope.removeCondition = function (index) {
            var conditionId = $scope.conditions.data[index].id;
            conditionService.archiveCondition(conditionId);
            $scope.conditions.data.splice(index, 1);
        };

        $scope.subtotal = function () {
            var subtotal = 0;
            angular.forEach($scope.items.data, function (item) {
                subtotal += item.quantity * item.rate;
            });
            return subtotal;
        };

        $scope.generateQuote = function (divName) {
            $scope.submitItems();
            $scope.submitConditions();
            if ($scope.conditions.data.length == 0) {
                document.getElementById("condition-page").style.display = "none";
            }
            var printContents = document.getElementById(divName).innerHTML;
            var popupWin;
            if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
                popupWin = window.open('', '_blank', 'width=600,height=800,scrollbars=no,menubar=no,toolbar=no,location=no,status=no,titlebar=no');
                popupWin.window.focus();
                popupWin.document.write('<!DOCTYPE html><html><head>' +
                    '<link rel="stylesheet" type="text/css" href="../css/style.css" />' +
                    '</head><body onload="window.print()"><div class="reward-body">' + printContents + '</div></html>');
                popupWin.onabort = function (event) {
                    popupWin.document.close();
                    popupWin.close();
                }
            } else {
                popupWin = window.open('', '_blank', 'width=800,height=600');
                popupWin.document.open();
                popupWin.document.write('<html><head><link rel="stylesheet" type="text/css" href="../css/style.css" /></head><body onload="window.print()">' + printContents + '</html>');
                popupWin.document.close();
            }
            popupWin.document.close();
            return true;
        };

        $scope.submitItems = function () {
            angular.forEach($scope.items.data, function (item) {
                if (item.quote_id == undefined) {
                    delete item.$$hashKey;
                    item.quote_id = $routeParams.quoteId;
                    itemService.createItem(item);
                }
            });
        };

        $scope.submitConditions = function () {
            angular.forEach($scope.conditions.data, function (condition) {
                if (condition.quote_id == undefined) {
                    delete condition.$$hashKey;
                    condition.quote_id = $routeParams.quoteId;
                    conditionService.createCondition(condition);
                }
            })
        };

        _fetchItems();
        _fetchConditions();
        _fetchQuote();
        _fetchClient();
        _fetchProject();


    }])
.directive('elastic', [
    '$timeout',
    function ($timeout) {
        return {
            restrict: 'A',
            link: function ($scope, element) {
                $scope.initialHeight = $scope.initialHeight || element[0].style.height;
                var resize = function () {
                    element[0].style.height = $scope.initialHeight;
                    element[0].style.height = "" + (element[0].scrollHeight + 10) + "px";
                };
                element.on("input change", resize);
                $timeout(resize, 0);
            }
        };
    }
]);

Answer 1

您可以使用ng-show这样的内容：

    <td class="item-row-quote">
<span ng-show = "item.unit  != null" class="quote-price-text" ng-model="row.dollarPerUnitText" id="dollarPerUnit">{{ '$/' + item.unit }}</span></td>

我希望nothing这就是你的意思。目前尚不清楚。

Answer 2

如果您有一个或两个可能为null的属性，则可以使用控制器中的空字符串更新它们。

DefaultController.$inject = ['$http'];

function DefaultController($http) {
    var vm = this;
    vm.item;

    function getItem() {
        var config = {
            transformResponse: function(data, headers) {
                if (data) {
                    if (data.unit === null || data.unit === undefined) {
                        data.unit = '';
                    }
                }

                return data;
            }
        };

        $http.get('/api/items', config)
             .success(getItemCompleted);

        function getItemCompleted(data) {
            vm.item = data;
        }
    }
}

如果您有许多可能为null的属性，并且您可以控制服务器端代码，那么看看是否可以通过返回空数组或空列表来处理，但如果没有则返回null，然后在其中编写自定义过滤器可以循环遍历对象的所有属性，并将空字符串分配给任何属于虚假值的属性

Ng-Model返回null而不是null

2 个答案: