AngularJS повторяется для строк и элементов

Question

AngularJS повторяется для строк и элементов

0

У меня Ionic приложение. Теперь у меня есть код ниже.

<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 каждые 3 или 4 cols этого решения, но у меня (ключ, значение), и это меня не устраивает.

Maksym Krugliachenko 20 июль 2016, в 21:49

Источник

0

Что сломано? Это кажется действительным.
theblindprophet 20 июль 2016, в 19:25
1

«это сломано» не является правильным решением проблемы. Также не знаю, что вы имеете в виду в последнем предложении, так как вы уже показываете ключ и значение. Пожалуйста, просмотрите раздел Как спросить
charlietfl 20 июль 2016, в 19:26
0

Если я использую одну строку, элементы на Android 4.0.0 не переносятся на новую строку. Мне нужно повторить строки, и в строках мне нужно увидеть 3 разных элемента.
Maksym Krugliachenko 23 июль 2016, в 08:15

Показать ещё 1 комментарий

Теги:

javascript

ionic-framework

angularjs

3 ответа

Ещё вопросы

Что сломано? Это кажется действительным.
«это сломано» не является правильным решением проблемы. Также не знаю, что вы имеете в виду в последнем предложении, так как вы уже показываете ключ и значение. Пожалуйста, просмотрите раздел Как спросить
Если я использую одну строку, элементы на Android 4.0.0 не переносятся на новую строку. Мне нужно повторить строки, и в строках мне нужно увидеть 3 разных элемента.

Mickers · Answer 1 · 2016-07-20T17-29-00.000Z

Возможно, используйте повтор коллекции с ионным списком?

Привет. Это не то, что мне нужно. Мне нужно повторить ряды и в одном ряду увидеть 3 разных предмета.

Nikolay Babanov · Answer 2 · 2016-07-20T18-32-00.000Z

Ваш вопрос недостаточно ясен, но я постараюсь ответить на него.

Прежде всего, вы не должны использовать href с угловой строкой шаблона, потому что есть вероятность, что ссылка укажет на несуществующую страницу (до завершения цикла дайджестов). Вместо этого используйте ng-href.

Источник: https://docs.angularjs.org/api/ng/directive/ngHref

Если я правильно понял вашу проблему, вы не можете получить доступ ко всем своим значениям в объекте из ng-repeat, это связано с тем, что вы, вероятно, не структурировали свой JS-объект должным образом.

Например (name, age) in {'adam':10, 'amalie':12}, приведет к тому, что имя сначала будет адамом, а затем amaile, то же самое касается возраста.

Чтобы ваш (key, value) работал правильно, ваша categoryMenuOut должна иметь структуру, похожую на:

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

или даже лучше:

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

В моем первом примере ваш ключ будет pizza1, value будет весь объект { name: 'Pepperoni' }, поэтому value.name будет равно Pepperoni. В этом случае у вас есть полный контроль над именем ключа. Если вы сделаете это, как во втором примере, ваши ключи будут 0, 1..

Попытайтесь изменить свой вопрос в следующий раз, чтобы мы могли понять его и получить правильный ответ.

Ruslan · Answer 3 · 2016-07-20T16-58-00.000Z

Это кажется правильным, но, возможно, вы хотите сделать что-то вроде этого:

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

}])

<script src="/jquery.min.js"></script>
<script src="/angular.min.js"></script>
<link rel="stylesheet" src="/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>