Question

我有Ionic app。现在我有以下代码。

<div class="row">
  <div class="col col-33" ng-repeat="(key, value) in categoryMenuOut">
    <a href="#/category/{{chosenCat}}/{{key}}">
       `some code`
       <span class="name">{{value.name}}</span>
     </a>
   </div>
</div>

但它在Android 4.0.0上被破坏了，我需要重复行和行中的3个项目。我需要这样的东西。

<div class="row" ng-repeat="(key, value) in categoryMenuOut">
   <div class="col col-33">
    <a href="#/category/{{chosenCat}}/{{key}}">
      `some code`
       <span class="name">{{value.name}}</span>
     </a>
   </div>
   <div class="col col-33">
    <a href="#/category/{{chosenCat}}/{{key}}">
      `some code`
       <span class="name">{{value.name}}</span>
     </a>
   </div>
   <div class="col col-33">
    <a href="#/category/{{chosenCat}}/{{key}}">
      `some code`
       <span class="name">{{value.name}}</span>
     </a>
   </div>
</div>

我需要ng-repeat中的键和值。我没有为我找到解决方案。你能帮我吗？

更新：如果我使用一行，Android 4.0.0上的项目不会转移到新行。我需要重复行，在行中我需要看到3个不同的项目。我已经尝试了Angular ng-repeat add bootstrap row every 3 or 4 cols这个解决方案，但我有（键，值）并且它不适合我。

Answer 1

也许将collection-repeat与ion-list一起使用？

Answer 2

这似乎有效，但也许你想做类似的事情：

angular.module('myApp',[])
.controller('myCtrl',['$scope',function($scope){
  $scope.categoryMenuOut =  {"Ben": {"name": "bill"}, "Nate": {"name": "joll"}, "Austin": {"name": "boll"}};

}])

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<div ng-app='myApp'>
  <div ng-controller='myCtrl'>
    <div class="row" ng-repeat="(key, value) in categoryMenuOut  track by $index">
     
	 <div class="col col-33">
        <h3>Key: {{key}}</h3> 
       <h4>Value: {{value.name}}
     </div>

       	 <div class="col col-33">
        <h3>Key: {{key}}</h3> 
       <h4>Value: {{value.name}}
     </div>
    
    <div class="col col-33">
        <h3>Key: {{key}}</h3> 
       <h4>Value: {{value.name}}
     </div>
      
    </div>
  </div>
 </div>

Answer 3

你的问题不够明确，但我会尽力回答。

首先，您不应将href与角度模板字符串一起使用，因为链接可能指向不存在的页面（在摘要循环完成之前）。请改用ng-href。

来源：https://docs.angularjs.org/api/ng/directive/ngHref

如果我理解你的问题，你就无法从ng-repeat访问对象中的所有值，这是因为你可能没有正确构建你的JS对象。

例如(name, age) in {'adam':10, 'amalie':12}，会导致名称首先是adam，然后是amaile，同样适合年龄。

为了让(key, value)正常工作，您的categoryMenuOut应该具有类似于以下内容的结构：

$scope.categoryMenuOut = {
    pizza1: {
       name: 'Pepperoni'
    }
}

甚至更好：

$scope.categoryMenuOut = [
    {
       name: 'Pepperoni'
    },
    {
       name: 'Salad'
    }
]

在我的第一个示例中，您的密钥为pizza1，value将是整个对象{ name: 'Pepperoni' }，因此value.name将等于Pepperoni 。在这种情况下，您可以完全控制密钥的名称。如果您按照第二个示例执行此操作，则您的密钥将为0, 1..。

下次尝试重新提问，以便我们理解并为您提供正确的答案。

AngularJS ng-repeat用于行和项目

3 个答案: