Question

我从api获取数据，我正在使用它来搜索某些内容。当json没有返回结果时如何显示NO RESULT FOUND。

Html代码

        <div class="item item-input-inset">
    <label class="item-input-wrapper">
      <input type="text" placeholder="Search" ng-model="search">
    </label>
    <button class="button button-small" ng-click="load(search)">
      Submit
    </button>
  </div>
  <section class="list">
       <article ng-repeat="object in news"> 
        <div class="item">


         <div ng-repeat="item in object.news">
        <p class="noWhiteSpace"><b>Available Size</b> - {{item.size}}</p>

         </div>

         </div>
         <div ng-repeat="item in object.news" class="button-bar bar-dark" >
  <a  ng-click = openUrl(item.url); class="button">button</a>

        </div>
      </article>
        </section>
        </ion-content>
      </ion-view>
    </script>

这是JS代码，我从api获取数据并搜索它。

 $http({

    method: "GET",
    url: https://news.com/json?limit=50"
  })
  .then(function(newsData){
   $scope.news= newsData.data.data.articles;
   $scope.hide();
    console.log(data);

  })

      $scope.load = function(search) {
     $scope.show();
  $http({
    method: "GET",
    url: "https://news.com/json?query_term=" + encodeURIComponent(search)
  })
  .then(function(newsData){
   $scope.newsto= newsData.data.data.article;
   $scope.hide();
    console.log(data);

  });
}

})

Answer 1

试试这段代码：

<section class="list">
    <div ng-if="news">
    <article ng-repeat="object in news">
        <div class="item">

            <img ng-src="{{object.medium_cover_image}}">

            <h2 class="noWhiteSpace">{{object.title}}</h2>
            <p class="noWhiteSpace">{{object.genres}}</p>
            <p class="noWhiteSpace"><b>Release</b> - {{object.year}} </p>

            <div ng-repeat="item in object.news">
                <p class="noWhiteSpace"><b>Available Size</b> - {{item.size}}</p>

            </div>

        </div>
        <div ng-repeat="item in object.news" class="button-bar bar-dark">
            <a ng-click=o penUrl(item.url); class="button">button</a>

        </div>
    </article>
    </div>
    <div ng-if="news">
        No news to show
    </div>
</section>

Answer 2

<article ng-repeat="object in news" ng-if="news.lenght">

//显示你的结果

<span ng-if="!news.lenght">No Result found </span>

更新了小提琴链接

link

Answer 3

你可以使用

<input ng-model='q'/>

和ng-repeat

   <article ng-repeat="object in news|filter:q as result">

和跨度

<span ng-if="results.length === 0">
      No results found...
    </span>

Answer 4

您还没有编写代码来捕获服务调用失败。任何机会，如果这种情况得到失败回应，那么你就没有编写代码来处理这种情况。

$http({
    method: 'GET',
    url: '/someUrl'
}).then(function successCallback(response) {
    // this callback will be called asynchronously
    // when the response is available
}, function errorCallback(response) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
});

Answer 5

html代码

 <h3 ng-if="noData">No Data Found</h3>

js代码

在 http

中添加此代码

if(!$scope.news){
      $scope.noData = true;
    }else{
      $scope.noData = false;
    }

如何显示AngularJS搜索中找不到的结果？

5 个答案: