ng-if (Angularjs)两个对象之间的比较



我从一个控制器移动几个阵型,我想使用"ng if"来比较id,但它不工作。

代码如下:

    var postsApi = 'http://mywebsite.com/wp-json/posts?filter[posts_per_page]=4&_jsonp=JSON_CALLBACK';

  $http.jsonp( postsApi ).
    success(function (data, status, headers, config) {
        $scope.posts = data;
      console.log( data );
    }).
    error(function(data, status, headers, config) {
      console.log( 'Post load error.' );
    });
  var newsApi = 'http://mywebsite.com/wp-json/posts?filter[category_name]=news&filter[posts_per_page]=4&_jsonp=JSON_CALLBACK';
    // This should go in a service so we can reuse it
  $http.jsonp(newsApi).
    success(function (data, status, headers, config) {
        $scope.news = data;
        console.log(data);
    });
  var jworldApi = 'http://mywebsite.com/wp-json/posts?filter[category_name]=world&filter[posts_per_page]=4&_jsonp=JSON_CALLBACK';
    // This should go in a service so we can reuse it
    $http.jsonp(jworldApi).
    success(function (data, status, headers, config) {
        $scope.jworld = data;
        console.log(data);
    });

在视图中:

    <div class="highlight-topright">

                    <ion-item class="main_post" ng-repeat="post in posts" ng-if="$index == 0" href="#/kikarnews/posts/{{post.ID}}">
                        <div class="wrapper">
                            <img class="full-image" src="{{ post.featured_image.attachment_meta.sizes.medium.url }}" />
                            <h3 class="cat_name_main"> {{post.terms.category[0].name}}</h3>
                            </div>
                            <h2 ng-bind-html="post.title"></h2>


</ion-item>
            <ion-item ng-repeat="post in posts" ng-if="$index != 0"     href="#/mysite/posts/{{post.ID}}">
                 <div class="row main_home">

                     <div class="col col-50 main_img_home">
                         <img class="full-image" src="{{ post.featured_image.attachment_meta.sizes.medium.url }}">
                     </div>

                     <div class="col col-50 main_title_home">
                         <h5>{{ post.date }}</h5>

                         <h2 ng-bind-html="post.title"></h2>

                         </div>
                     </div>

</ion-item>
</div>
        <!---news-->
        <div class="news_mideel_home">
            <h2>news</h2>
            <ion-item ng-repeat="newsi in news" **ng-if="newsi.ID != post.ID**" href="#/mysite/posts/{{newsi.ID}}">
                <div class="row main_home">

                    <div class="col col-50 main_img_home">
                        <img class="full-image" src="{{ newsi.featured_image.attachment_meta.sizes.medium.url }}">
                    </div>

                    <div class="col col-50 main_title_home">
                        <h5>{{ newsi.date }}</h5>

                        <h2 ng-bind-html="newsi.title"></h2>

                    </div>
                </div>
            </ion-item>

        </div>

        <div class="jworld">
           <h2>jworld</h2>
            <div ng-repeat="jworldi in jworld">
                <ion-item ng-if="jworldi.ID == 5358"      href="#/mysite/posts/{{jworldi.ID}}">
                    <div class="row main_home">

                        <div class="col col-50 main_img_home">
                            <img class="full-image" src="{{jworldi.featured_image.attachment_meta.sizes.medium.url }}">
                        </div>

                        <div class="col col-50 main_title_home">
                            <h5>{{ jworldi.date }}</h5>

                            <h2 ng-bind-html="jworldi.title"></h2>

                        </div>
                    </div>
                </ion-item>

        </div>
            </div>

如果您对新闻中的下面一行有问题div

ng-if = " newsi。= post。ID按预期工作,因为post作用域在第一个div标记中结束。所以news_midel_home中的post是空的。但是您可以通过在i周围添加一个新的div标签来添加它

<div ng-repeat="post in posts">
<ion-tem ng-repeat="newsi in news" **ng-if="newsi.ID != post.ID**" href="#/mysite/posts/{{newsi.ID}}">>
------
</ion-item>
</div>

最新更新