javascript - 从 json 到 View 的 AngularJs 数据绑定(bind)

Question

这可能是一个非常明显的问题，但我找不到任何答案。

我只是想从我的服务器加载一些 JSON 数据到客户端。

如何使用 angularJs 在我的 View 中获取所有三张幻灯片？帮助将不胜感激。就目前而言，使用这段代码，我只能拉入其中一张幻灯片。

View :

          <div ng-app="app">
            <div ng-controller="CarouselDemoCtrl" id="slides_control">
              <carousel interval="myInterval">
                <slide ng-repeat="slide in slides" active="slide.active">
                  <div class="slide"><h2 class="slide-text">{{slide.Carousel[0]}}</h2></div>
                </slide>
              </carousel>
            </div>
            </div>

Controller :

angular.module('app')

.controller('CarouselDemoCtrl', function($scope, dataService) {

$scope.addSlide = function() {
    var newSlide = {"Carousel": $scope.values}
    $scope.slides.push(newSlide);
};

$scope.myInterval = 3000;

dataService.getSlides(function(response) {
        console.log(response.data);
        $scope.slides = response.data;
    });

})

服务:

angular.module('app')

.service('dataService', function($http) {

this.getSlides = function(callback) { 
    $http.get('json/be-creative.json')
    .then(callback)
}

});

JSON:

[
{"AboutUs": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."},
{"Carousel": ["Slide 1", "Slide 2", "Slide 3"]}
]

Answer 1

您在错误的级别上绑定(bind)了对象。

如果打算用slide表示轮播，那么就这样正确绑定(bind)

dataService.getSlides(function(response) {
    console.log(response.data);
    $scope.aboutUs = response.data.AboutUs;
    $scope.slides = response.data.Carousel;
});

<slide ng-repeat="slide in slides" active="slide.active">
    <div class="slide"><h2 class="slide-text">{{slide}}</h2></div>
</slide>

提示:ng-repeat 应该用在数组上

---

编辑:好的，进一步检查后您有一个额外的对象层，因此添加 find 以定位目标对象。

如果可能，把json格式改成

{
    "AboutUs": "...",
    "Carousel": ["Slide 1", "Slide 2", "Slide 3"]
}

angular.module('app', [])

  .controller('CarouselDemoCtrl', function($scope, dataService) {

    $scope.addSlide = function() {
      var newSlide = {}
      $scope.slides.push(newSlide);
    };

    $scope.myInterval = 3000;

    dataService.getSlides(function(response) {
      // console.log(response.data);
      $scope.aboutUs = response.data.find(function(d) { return d.AboutUs; }).AboutUs;
      $scope.slides = response.data.find(function(d) { return d.Carousel; }).Carousel;
    });

  })

  .service('dataService', function($http) {

    this.getSlides = function(callback) {
      //$http.get('json/be-creative.json')
      //  .then(callback)
      
      var json = [
{"AboutUs": "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."},
{"Carousel": ["Slide 1", "Slide 2", "Slide 3"]}]
      callback({data: json});
    }

  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="CarouselDemoCtrl" id="slides_control">
    <carousel interval="myInterval">
      <slide ng-repeat="slide in slides" active="slide.active">
        <div class="slide">
          <h2 class="slide-text">{{slide}}</h2>
        </div>
      </slide>
    </carousel>
  </div>
</div>