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

回答

相關問題