Jean-Michel Provencher Jean-Michel Provencher - 5 months ago 21
AngularJS Question

Ng-Model returning null instead of nothing

I am returning objects from a Sqlite database that sometimes returns null for some attributes of this object. For example (item.unit) is sometimes null in the database.

I got this code in my html file

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


How can I make sure the browser display nothing for item.unit instead of displaying null.




This is my controller code

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

You can use ng-show somthing like :

    <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>

I hope that this is what you mean by nothing it is not clear.

Comments