Come utilizzare HTML all'interno legano condizionale nel markup

Question

ho markup come questo

<p>{{ !job.AdditionalNotes ? "No additional notes." : job.AdditionalNotes }}</p> 

Vorrebbe enfasi Nessun Note aggiuntive utilizzando qualcosa di simile.

<p>{{ !job.AdditionalNotes ? <em>"No additional notes."</em> : job.AdditionalNotes }}</p> 

C'è un modo per farlo senza usare ng-if e ng-show per fare questo mantenendo l'operatore ternario?

Answer 1

prima opzione

ottengo questo lavoro nel modo seguente (senza ng-show o ng-if). Sto usando il servizio ng-bind-html e $sce per rendere l'HTML. Dal momento che il messaggio "nessuna nota aggiuntiva" è generico e comune, possiamo facilmente definire nel controller e ottenerlo da un metodo dopo la sanitizzazione.

var app = angular.module("sa", []); 
 

 
app.controller("FooController", function($scope, $sce) { 
 

 
    $scope.jobs = [{ 
 
    name: "Sr. Software Developer" 
 
    }, { 
 
    name: "Software Associates", 
 
    AdditionalNotes: "Remote location" 
 
    }, { 
 
    name: "Front-end developer" 
 
    }]; 
 

 
    $scope.trust = function(text) { 
 
    return $sce.trustAsHtml(text); 
 
    }; 
 

 
    $scope.noNotesMessage = function() { 
 
    return $scope.trust("<em>No additional notes.</em>") 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="sa" ng-controller="FooController"> 
 
    <ol> 
 
    <li ng-repeat="job in jobs"> 
 
     <strong>{{job.name}}</strong> 
 
     <p ng-bind-html="!job.AdditionalNotes ? noNotesMessage() : trust(job.AdditionalNotes)"></p> 
 
    </li> 
 
    </ol> 
 
</div>

seconda opzione

In alternativa, è possibile scrivere una direttiva:

var app = angular.module("sa", []); 
 

 
app.controller("FooController", function($scope, $sce) { 
 

 
    $scope.jobs = [{ 
 
    name: "Sr. Software Developer" 
 
    }, { 
 
    name: "Software Associates", 
 
    AdditionalNotes: "Remote location" 
 
    }, { 
 
    name: "Front-end developer" 
 
    }]; 
 
}); 
 

 
app.directive('notes', function() { 
 
    return { 
 
    restrict: 'E', 
 
    scope: { 
 
     additional: '=' 
 
    }, 
 
    link: function($scope, element, attr) { 
 
     var html = "<p>" + ($scope.additional || "<em>No additional notes.</em>") + "</p>"; 
 
     element.html(html); 
 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="sa" ng-controller="FooController"> 
 
    <ol> 
 
    <li ng-repeat="job in jobs"> 
 
     <strong>{{job.name}}</strong> 
 
     <notes additional="job.AdditionalNotes"></notes> 
 
    </li> 
 
    </ol> 
 
</div>