AngularJS ng-if

Question

我目前正在處理一個通知頁面，用戶可以通過該帖子接收4個操作中的通知：

跟隨，像，等。

每個對象都有一個'concirning'變量，它給出了所發生事件的動作。

雖然對於每一個動作我都想要另一句話（顯然）

目前我有以下內容，但在我眼中有點亂：

<div ng-repeat="notification in notifications | orderBy :'created_at':true | limitTo:10" class="list-group-item dash-posts">
            <div class="row">
                <div class="col-md-1">
                    <img ng-src="{{notification.user.picture}}" max-width="40px" width="50px">
                </div>
                <div class="col-md-11">
                    <span ng-if="notification.notification.concirning=='comment'"><strong>{{notification.user.name}}</strong> has commented on one of your captures.</span>
                    <span ng-if="notification.notification.concirning=='birdsuggestion'"><strong>{{notification.user.name}}</strong> has given a birdname for your capture! Go check it out!</span>
                    <span ng-if="notification.notification.concirning=='like'"><strong>{{notification.user.name}}</strong> has just liked your capture!</span>
                    <span ng-if="notification.notification.concirning=='follow'"><strong>{{notification.user.name}}</strong> has started following you.</span>
                </div>
                </div>
            <hr />
        </div>
    </div>

通知由2個對象組成： notification.user ，用於執行觸發通知的操作，通知本身為notification.notification

有沒有辦法讓我把它清理干凈？ 謝謝

Answer 1

請嘗試以下方法：

在你的JS中：

$scope.message="";
$scope.$watch('notification.notification.concirning', function (value) {
    if (value== "comment") {
        $scope.message="whatever message you want"; 
    }
    //Put conditions for each type of concirning
});

在你的HTML：

<div class="col-md-11">
     <span ng-if="notification.notification.concirning=='comment'">{{message}}</span>
</div>

如果您的消息有html元素/ tage，請閱讀有關ng-bind-html更多信息

Answer 2

您可以使用ngSwitch使其更清潔：

<div ng-repeat="notification in notifications | orderBy :'created_at':true | limitTo:10" class="list-group-item dash-posts">
  <div class="row">
    <div class="col-md-1">
      <img ng-src="{{notification.user.picture}}" max-width="40px" width="50px">
    </div>
    <div class="col-md-11" ng-switch="notification.notification.concirning">
      <span ng-switch-when="comment"><strong>{{notification.user.name}}</strong> has commented on one of your captures.</span>
      <span ng-switch-when="birdsuggestion"><strong>{{notification.user.name}}</strong> has given a birdname for your capture! Go check it out!</span>
      <span ng-switch-when="like"><strong>{{notification.user.name}}</strong> has just liked your capture!</span>
      <span ng-switch-when="follow"><strong>{{notification.user.name}}</strong> has started following you.</span>
    </div>
  </div>
  <hr />
</div>

Answer 3

對此最好和最通用的方法是指令。

這是一個小指令，需要3個參數：

• object：如果在地圖的值中使用角度模板，則使用的值
• map：一個簡單的鍵/值對象，對象可以是HTML，如果是這樣，你可以使用角度模板來顯示對象的數據{{object。[...]}}
• key：它們用於確定顯示哪條消息的鍵

有可能有一些更清潔的方式，如：

• 而不是分配原始地圖，傳遞一個函數，以便您可以根據需要處理更復雜的情況
• 使用attr而不是隔離范圍並將范圍設置為true以繼承其他范圍，因此您可以使用存儲的所有內容。 否則，您將需要一個包裝器對象，如果更改中的值，您將需要刷新它。
• 使用不太通用的東西，在指令中定義映射鍵/模板，這更符合angularJS的指導方針。 因此，您必須為每個映射定義一個指令。

 angular.module("app", []).controller("ctrl", ['$scope', '$sce', function($scope, $sce){ $scope.map = { 'comment':$sce.trustAsHtml('<strong>{{object.user.name}}</strong> has commented on one of your captures.'), 'birdsuggestion':$sce.trustAsHtml('<strong>{{object.user.name}}</strong> has given a birdname for your capture! Go check it out!'), 'like':$sce.trustAsHtml('<strong>{{object.user.name}}</strong> has just liked your capture!'), 'follow':$sce.trustAsHtml('<strong>{{object.user.name}}</strong> has started following you.') }; $scope.notifications = [{ user:{name:'foo'}, notification:{concirning:'comment'} }, { user:{name:'bar'}, notification:{concirning:'like'} }] }]).directive('mapMessageToView', function($compile){ return{ restrict:'A', scope:{ map:"=", key:"=", object:"=" }, replace:false, link:function(scope, element, attr){ element.html(scope.map[scope.key]); $compile(element.contents())(scope); scope.$watch('key', function(newValue){ element.html(scope.map[scope.key]); $compile(element.contents())(scope); }); } }; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="ctrl"> <div ng-repeat="notification in notifications"> <div> <span map-message-to-view key="notification.notification.concirning" map="map" object="notification"></span> </div> </div> </div>