工业及工业发展不正常

Question

我尝试过几种方法，但由于某种原因，我无法让init方法在我正在构建的选项卡应用程序上工作。

我正在使用http (通过WordPress REST )引入JSON，并且必须使用“as”语法才能使它正常工作。一旦我单击初始选项卡，一切都会正常工作，但我需要第一个选项卡来加载页面加载。

以下是应用程序：

​

JS: 

var homeApp = angular.module('homeCharacters', ['ngSanitize']);
homeApp.controller('characters', function($scope, $http) {
  $http.get("http://example.com/wp-json/posts?type=character").then(function(response) {
    $scope.myData = response.data;
  });
});
homeApp.filter('toTrusted', ['$sce',
  function($sce) {
    return function(text) {
      return $sce.trustAsHtml(text);
    };
  }
]);

HTML: 

<section class="characters" ng-app="homeCharacters" ng-controller="characters as myData">
  <div class="char_copy" ng-repeat="item in myData" ng-bind-html="item.content | toTrusted" ng-show="myData.tab === item.menu_order">
    {{ item.content }}
  </div>
  <div class="char_tabs">
    <nav>
      <ul ng-init="myData.tab = 0">
        <li ng-repeat="item in myData">
          <a href ng-click="myData.tab = item.menu_order">
            <img src="{{ item.featured_image.source }}" />
            <h3>{{ item.title }}</h3>
          </a>
        </li>
      </ul>
    </nav>
  </div>
</section>
<!--end characters-->

​

我想我错过了一些简单的东西。我要插入的选项卡的menu_order内容是0。在ng-检查器中，MyData下显示选项卡:0

我愿意接受任何人所能提供的任何帮助！

Answer 1

目前，当用户界面在页面上呈现时，首先对ng-init指令进行处理，计算myData.tab = 0并将myData的tab属性值设置为0，然后当异步API完成时，再将检索到的数据分配给myData对象，从而抹掉旧的myData值。

在这种情况下，您不应该使用ng-init。您应该将从ajax检索到的data设置为控制器本身的myData的另一个属性。

码

homeApp.controller('characters', function($scope, $http) {
  $scope.myData = { tab: 0 }; //set default tab
  $http.get("http://example.com/wp-json/posts?type=character").then(function(response) {
    $scope.myData.data = response.data;
  });
});

标记

<li ng-repeat="item in myData.data">

Answer 2

在调用服务之前，您只需将您的作用域声明为emoty对象或null，然后它就可以工作了，如：$scope.myData = {}；