動態引用數組

-2

我想根據用戶的操作引用1個索引（將有30個不同的索引），然後使用ng-repeat來遍歷索引中的每個項目。動態引用數組

控制器：

$scope.meals = [ 
    { title: 'Abs', url:"#/app/mworkouts",id: 100, img: "img/female.jpg", vid:"https://media.giphy.com/media/TLpGHso4sEJlS/giphy.gif",}, 
    { title: 'Arms', url:"#/app/browse",id: 2 , img: "img/male.jpg", vid:"https://media.giphy.com/media/ZYi2Lc03nrryw/giphy.gif"}, 
    { title: 'Biceps', url:"#/app/search",id: 3, img: "img/Spotify_2.jpg", vid:"https://media.giphy.com/media/zOleW7sjYngQ0/giphy.gif" }, 
    { title: 'Legs', url:"#/app/search",id: 4, img: "img/Spotify_4.jpg", vid:"https://media.giphy.com/media/srNYANrTyYeFW/giphy.gif" }, 
    { title: 'Core', url:"#/app/mworkouts",id: 5, img: "img/female.jpg", vid:"https://media.giphy.com/media/4YAkSYGsKieXK/giphy.gif" }, 
    { title: 'Back', url:"#/app/mworkouts",id: 6, img: "img/male.jpg", vid:"https://media.giphy.com/media/8eBAeU1W4kV68/giphy.gif" } 
    ]; 
$scope.deserts = [ 
    { title: 'Chocolate', url:"#/app/mworkouts",id: 1 }, 
    { title: 'Cake', url:"#/app/browse",id: 2 }, 
    { title: 'Ice Cream', url:"#/app/search",id: 3 }, 
    { title: 'Sundae', url:"#/app/search",id: 4 }, 
    { title: 'Cherry Pie', url:"#/app/mworkouts",id: 5 }, 
    { title: 'Apple Pie', url:"#/app/mworkouts",id: 6 }, 
    { title: 'Pumpkin Pie', url:"#/app.mworkouts", id: 7} 
    ]; 

$scope.allbooks = [{ 
    'book1': { 
     title: "Eat Pray Don't Love", 
     price: 3.99, 
     workoutname: "meals" 
    }, 
    'book2': { 
     title: "Hello Fadder Hello Mudder", 
     price: 19.99, 
     workoutname:"deserts" 
    } 
    }, { 
    'book2': { 
     title: "DaVinci Code", 
     price: 7.99, 
     workoutname:"deserts" 
    } 
    }];

功能設置選擇：

$scope.pick = function(selectedBook) { 
    $rootScope.choice = selectedBook; 
    }

終於HTML：

<div ng-repeat="m in {{choice.workoutname}}"> 
     <div ng-if="meal_index==$index" ng-init="startCount=m.id"> 
      <img src="{{m.img}}" style="width:100%; height:100%;max-width:500px;"> 
      <img src="{{m.vid}}" style="width:100%; height:100%;max-width:500px;"> 
      <p> 
      {{m.title}} {{m.id-40}}<!-- {{$index+1}} --> out of {{meals.length}} {{startCount}} 
      <button ng-click='vs(m.id)'>Setter</button> 
     </div> 

    </div>

對不起所有的怪異的名字......這只是一個例子。在此先感謝:)

來源

2015-12-20 MehdiN

除非你有一個真正需要使用$ rootScope存儲選擇，堅持使用$範圍。也看不到接線功能。 – Will

究竟是什麼問題？什麼不行？報告了哪些錯誤？怎麼了？ – Pointy

視圖中沒有與設置的範圍變量或方法相關的值。奇怪的名字沒有問題，但至少必須得到全面的代碼。 – swestner

這並不罕見作爲新手得到這個錯誤。但是你需要深入理解角/離子，主要是關於數組，對象和數據綁定。希望這是有幫助的。

下面是ü可以做的方式之一，

控制器：

var meals = [ 
    { title: 'Abs', url:"#/app/mworkouts",id: 100, img: "img/female.jpg", vid:"https://media.giphy.com/media/TLpGHso4sEJlS/giphy.gif"}, 
    { title: 'Arms', url:"#/app/browse",id: 2 , img: "img/male.jpg", vid:"https://media.giphy.com/media/ZYi2Lc03nrryw/giphy.gif"}, 
    { title: 'Biceps', url:"#/app/search",id: 3, img: "img/Spotify_2.jpg", vid:"https://media.giphy.com/media/zOleW7sjYngQ0/giphy.gif" }, 
    { title: 'Legs', url:"#/app/search",id: 4, img: "img/Spotify_4.jpg", vid:"https://media.giphy.com/media/srNYANrTyYeFW/giphy.gif" }, 
    { title: 'Core', url:"#/app/mworkouts",id: 5, img: "img/female.jpg", vid:"https://media.giphy.com/media/4YAkSYGsKieXK/giphy.gif" }, 
    { title: 'Back', url:"#/app/mworkouts",id: 6, img: "img/male.jpg", vid:"https://media.giphy.com/media/8eBAeU1W4kV68/giphy.gif" } 
    ]; 

    var deserts = [ 
    { title: 'Chocolate', url:"#/app/mworkouts",id: 1 }, 
    { title: 'Cake', url:"#/app/browse",id: 2 }, 
    { title: 'Ice Cream', url:"#/app/search",id: 3 }, 
    { title: 'Sundae', url:"#/app/search",id: 4 }, 
    { title: 'Cherry Pie', url:"#/app/mworkouts",id: 5 }, 
    { title: 'Apple Pie', url:"#/app/mworkouts",id: 6 }, 
    { title: 'Pumpkin Pie', url:"#/app.mworkouts", id: 7} 
    ]; 

    $scope.allbooks = [ 
    { 
     category: "book1", 
     title: "Eat Pray Don't Love", 
     price: 3.99, 
     workoutname: "meals" 
    }, 
    { 
     category: "book2", 
     title: "Hello Fadder Hello Mudder", 
     price: 19.99, 
     workoutname: "deserts" 
    }, 
    { 
     category: "book3", 
     title: "DaVinci Code", 
     price: 7.99, 
     workoutname: "deserts" 
    } 
    ]; 

    $scope.choices = ''; 
    $scope.pick = function(selectedBook) { 
    if(selectedBook.workoutname === 'meals'){ 
     $scope.choices = meals; 
     $scope.details.show(); 
    }else{ 
     $scope.choices = deserts; 
     $scope.details.show() 
    } 
    }; 

    $scope.setter = function(id){ 
    //do something with id 
    }; 

    $ionicModal.fromTemplateUrl('details.html', { 
    scope: $scope, 
    animation: 'slide-in-right' 
    }).then(function (modal) { 
    $scope.details = modal; 
    }); 

    $scope.$on('$destroy', function() { 
    $scope.details.remove(); 
    });

HTML

<ion-view view-title="Search"> 
<ion-content> 
    <div class="list card" 
     ng-repeat="book in allbooks" 
     ng-click="pick(book)"> 
     <p class="positive"><strong>{{book.title}}</strong></p> 
     <p>Type: {{book.workoutname}}</p> 
     <p>Price: {{'$'+book.price}}</p> 
    </div> 
</ion-content> 
</ion-view> 

<script id="details.html" type="text/ng-template"> 
<ion-modal-view> 
<ion-header-bar class="dark"> 
    <h1 class="title text-centerx">Details</h1> 
    <button class="button button-clear ion-close" ng-click="details.hide()"></button> 
</ion-header-bar> 
<ion-content> 
    <div class="list card" 
     ng-repeat="choice in choices"> 
     <a class="item item-avatar" href="#"> 
     <img src="{{choice.img}}"> 
     <h2>{{choice.title}}</h2> 
     </a> 
     <img ng-if="choice.vid" src="{{choice.vid}}" style="width:100%; height:100%;max-width:500px;"> 
     <div> 
     <button class="button button-balanced" ng-click='setter(choice.id)'>Setter</button> 
     </div> 
    </div> 
</ion-content> 
</ion-modal-view> 
</script>

來源

2015-12-22 07:23:28 Rjun

動態引用數組

回答

相關問題