Ng-Model返回null而不是Nothing

我从Sqlite数据库返回对象，有时对于此对象的某些属性返回null。例如（item.unit）在数据库中有时为空。Ng-Model返回null而不是Nothing

我在HTML文件中得到这个代码

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

我怎样才能确保浏览器就什么都不显示了item.unit，而不是显示为空。

这是我的控制器代码

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

来源

2016-06-09 Jean-Michel Provencher

也许您可以使用过滤器。 – Nico

让我们看到你的控制器代码。这个逻辑很可能会在那里完成。 – adolfosrs

我为你添加了它。 –

您可以使用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目前尚不清楚。

来源

2016-06-09 13:40:09

是的，谢谢它的工作！对不起，如果我不清楚 –

你知道我的问题为什么没有upvoted？ @itsik我想在stackoverflow上提出很好的问题，像你这样的人给出了很好的答案，但我仍然得到低估。 –

您添加了匹配鳕鱼，更具体，并确保第一次读者会完全理解你。 –

如果您有一个或两个可能具有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; 
     } 
    } 
}

如果您有许多特性，这种特性为空，如果您在服务器端代码的控制权，然后看到返回空数组或空单，但不为空，如果没有，那么写，如果你能处理有自定义过滤器，您可以遍历对象的所有属性并将空字符串分配给任何属于虚假值的属性

来源

2016-06-09 13:52:21

谢谢，但我认为这个应用程序最好只使用ng-show和条件。 –

你知道我的问题为什么没有upvoted吗？我试图在stackoverflow上提出一些很好的问题，像你这样的人给出了很好的答案，但我仍然得到了低估。 –

Ng-Model返回null而不是Nothing

回答

相关问题