Javascript 动态引用数组

我试图根据用户的操作引用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"
    }
  }];

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();
  });

设置选项的函数：

$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>

{{m.title}{{m.id-40}}{{meedins.length}}{{startCount}}
塞特

---

对不起，所有奇怪的名字…这只是一个例子。提前感谢：）

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

下面是你可以做的一个方法

控制器：

$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"
    }
  }];

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

{{book.title}
类型：{{book.workoutname}

价格：{{$'+book.Price}

细节
塞特

除非您确实需要使用$rootScope来存储选项，否则请坚持使用$scope。没有看到拾取功能也连接。到底是什么问题？什么不起作用？报告了哪些错误？发生了什么？视图中没有与设置范围变量或方法相关的值。奇怪的名字很好，但它至少会产生全面的代码。对不起，我对编码非常陌生…我遗漏了pick代码，因为我认为它对问题不重要（我会尝试添加它）。但是您能告诉我如何使用ng repeat动态访问阵列的一部分吗。所以我应该把“膳食”放在“所有书籍”中，因为“我在{{choice.workoutname}}}”中不起作用。。。顺便说一句，选择是基于ng单击动态设置的（示例选择是allbooks[0]。book1…谢谢