Question

我是Ionic（和stackoverflow ;-)）的新手，但我的应用程序几乎完成了一件小事，我需要你的帮助！

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

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

这很好用。但我必须用动态变量替换“Clicker”，我将它与Detail View一起传递。当我把

{{produkt.cards_name}}

进入模板，它工作得很好，我看到“Clicker”这个词。但当我用它替换离子载玻片中的“Clicker”时，我看不到任何东西。我该如何解决？

这是一些代码。

（Controller.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(){

})
;

（App.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&amp;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&amp;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&amp;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 =＆＃34; Clicker中的步骤[product.cards_name]＆＃34;

离子和AngularJS：ng-repeat中的变量？

1 个答案: