动态引用数组

Question

我正在尝试根据用户的操作引用 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>

抱歉所有奇怪的名字...这只是一个例子。提前致谢:)

Answer 1

作为新手，犯这个错误的情况并不少见。但是你需要深入理解 angular/ionic，主要是关于数组、对象和数据绑定。希望这对您有所帮助。

以下是您可以采取的一种方式，

控制器：

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>

动态引用数组

Dynamically reference an array

html

javascript

angularjs

ionic-framework

ionic