Ionic 和 AngularJS：ng-repeat 中的变量？

Question

我是 Ionic（和 stackoverflow）的新手，但我的应用程序已接近完成，除了一件小事，我需要你的帮助！

我有一个详细视图（produktDetail.html），我必须在其中放置一个离子幻灯片框。该幻灯片框应包含 ng-rpeat，例如：

<ion-slide ng-repeat="steps in Clicker"></ion-slide>

这个效果很好。但我必须用动态变量替换“Clicker”，我将其与详细信息视图一起传递。当我放

{{produkt.cards_name}}

进入模板，它工作正常，我看到“Clicker”这个词。但是当我用它替换离子幻灯片中的“Clicker”时，我看不到任何东西。我该如何解决它？

这是一些代码。

（控制器.js）

.controller('BrowseCtrl', function($scope, ProduktService){
$scope.productList = ProduktService.getAll();

})

.controller('ProduktDetailCtrl', function($scope, $stateParams, ProduktService){
    
    var produktId = $stateParams.produktName;
    $scope.produkt = ProduktService.getSelected(produktId);

      $scope.Clicker = [
    { title: 'Reggae', id: 1 },
    { title: 'Lulu', id: 1 },
    { title: 'Blabla', id: 1 }
    ];
 
})

.controller('CoachCtrl', function(){
            
})
;

（应用程序.js）

.factory('ProduktService', function(){
   
    var productList = [
        
        {name: "Der Clicker",
         txt: "Das Training mit dem Clicker ist eine einfache, aber sehr effektive Methode des Hundetrainings. Über die Funktionsweise des Clickers erfährst du hier mehr.",
         img_pre: "../www/img/kurse/preview/Clicker_pre.jpg",
         img_de: "../www/img/kurse/detail/Clicker.png", 
         cards_name: "Clicker",
         trailer: "https://www.youtube-nocookie.com/embed/kPsrI0cW1EQ?rel=0&showinfo=0",
         be1: "10",
         be2: "5",
         be3: "2",
        },
        
        {name: "Das Platz",
         txt: "Neben 'Sitz' ist Platz eines der Signale, dass du deinem Hund am häufigsten geben wirst. Somit ist 'Platz' eine absolute Basic Übung.",
         img_pre: "../www/img/kurse/preview/platz_pre.jpg",
         img_de: "../www/img/kurse/detail/Platz.jpg",
         cards_name: 'Platz',
         trailer: "https://www.youtube-nocookie.com/embed/kTcbNF3Bq14?rel=0&showinfo=0",
         be1: "7",
         be2: "3",
         be3: "2",
        },
        
        {name: "Das Sitz",
         txt: "Gemeinsam mit dem Signal 'Platz' ist 'Sitz' eines der Signale, dass du deinem Hund am häufigsten geben wirst. Damit ist auch dieses Signal eine absolute Basic Übung.",
         img_pre: "../www/img/kurse/preview/sitz_pre.jpg",
         img_de: "../www/img/kurse/detail/Sitz.jpg",
         cards_name: 'Sitz',
         trailer: "https://www.youtube-nocookie.com/embed/VRKlvi2F-y0?rel=0&showinfo=0",
         be1: "7",
         be2: "3",
         be3: "2",
},
    ];
    
    var treffer;
    
    return{
        getAll: function(){
            return productList;
        },
        getSelected: function(produkt_name){
            productList.forEach(function(object){
                if(angular.equals(object.name, produkt_name)){
                    treffer = object;
                }
            })
            return treffer;
        }
    }
})

（Browse.html - 主视图）

<ion-view view-title="Kurse">
  <ion-content>
  
      <ion-list>

          <ion-item class="item item-avatar item-icon-right" ng-repeat="produkt in productList" ng-href="#/app/browse/{{produkt.name}}">
            <img src="{{produkt.img_pre}}" id="img_preview">
            <h2>{{produkt.name}}</h2>
            <p>{{produkt.txt}}</p>
            <i class="icon ion-ios-arrow-right"></i>
          </ion-item>
      </ion-list>
      <br>
  </ion-content>
</ion-view>

最后：produktDetail.html（详细视图）

<ion-view view-title="{{produkt.name}}">

  <ion-content>
    
      <div class="responsive-video">
<iframe src="{{produkt.trailer}}" frameborder="0" allowfullscreen></iframe>
</div>          
      <p class="desc">{{produkt.txt}}</p>
      <br>
      
<ion-slide-box show-pager="false">
    <ion-slide ng-repeat="steps in Clicker">
        <div class="card">
        <div class="item item-divider">
            <h2>{{steps.title}}</h2>
        </div>
        <div class="item item-text-wrap">

        </div>    
    </div>
        
  </ion-slide>
</ion-slide-box>
  </ion-content>
</ion-view>

希望您明白我的意思 - 期待您的来信！

Answer 1

{{...}} 仅适用于表达式（字符串或数字）。对象将被转换为字符串。 尝试更改变量 Clicker 的值，而不是变量本身。或者 $scope.Clicker = {ret:[...],ter:[...]} 并在 html 中： ng-repeat="Clicker [product.cards_name] 中的步骤"