Угловой Js ng-повторить итерацию над JSON

Я новичок в stackoverflow, пожалуйста, исправьте мои ошибки.Угловой Js ng-повторить итерацию над JSON

Ниже мой JSON:

newTodo = { 
      title: "task 1", 
      cat: "category 1", 
     };

Аналогично

newTodo = { 
      title: "task 2", 
      cat: "category 1", 
     }; 


     newTodo = { 
      title: "task 3", 
      cat: "category 3", 
     };

Теперь в моем HTML, как я должен писать код, как:

<li ng-repeat="todo in todos"> 

      {{todo.title}} 
      {{todo.cat}} 

</li>

Но выше неправильно, я хочу задачи, которые будут показаны категория мудрая как:

категория 1: список задач категория 2: список задач

Пожалуйста, помогите. Пожалуйста, скажите мне, если вопрос не ясен.

источник

2016-10-24 Sajan Nagpal

Добро пожаловать в StackOverflow, Саяна! – Andrew

Возможно это, если вы хотите заказать его по категории ng-repeat = "todo in todos order todo.cat" Вопрос не совсем ясен. – Groben

вам нужно сделать и массив объектов – Araz

var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function($scope) { 
 
    $scope.todos = [{ 
 
    "title": "Task1", 
 
    "cat": "Cat1" 
 
    }, { 
 
    "title": "Task2", 
 
    "cat": "Cat1" 
 
    }, { 
 
    "title": "Task1", 
 
    "cat": "Cat2" 
 
    }]; 
 

 
    var reduced = {}; 
 

 
    $scope.todos.map(function(item) { 
 
    reduced[item.cat] = reduced[item.cat] || []; 
 
    reduced[item.cat].push(item.title); 
 
    }); 
 

 
    $scope.reducedOutput = reduced; 
 
});

li{ 
 
color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="myCtrl"> 
 
    
 
    <ul ng-repeat="(key, value) in reducedOutput"> 
 
    {{key}} 
 
    <li ng-repeat="title in value">{{title}}</li> 
 
    </ul> 
 

 
</div>

источник

2016-10-24 08:57:06 Weedoze

Хороший ответ. Проголосуйте. – error505

@ error505 Спасибо – Weedoze

@SajanNagpal Stackoverflow быстро, но вы не должны рассматривать его как генератор кода. Ответ - это копия/вставка одного из моих предыдущих ответов ... Вы должны сначала искать себя – Weedoze

Вы можете написать это:

$scope.newToDo = { 
      title: "task 2", 
      cat: "category 1", 
     };

И чем в HTML

<li ng-repeat="todo in newToDo ">  
    {{todo.title}} 
    {{todo.cat}}  
</li>

Или в таблице:

<table> 
    <tr ng-repeat="todo in newToDo"> 
    <td>{{todo.title}}:<span style="font-weight: bold"> {{todo.cat}}</span></td> 
     </tr> 
</table>

источник

2016-10-24 08:46:14 error505

, но он показывает все задачи наряду с такими категориями, как (task1, category1), (task2, category1), (task3, category3) ..... Я хочу, чтобы это было так: (категория 1: задача 1, задача2), (категория 3: task3, task 4) –

Чем Jigar7521 сказал, что вы должны построить свои данные json, чтобы он появился, как он описал. – error505

@ ошибка505 он ** должен ** не менять свой json. Он все еще может использовать свою структуру json – Weedoze

Вы можете сделать JSON как:

var allTask = [ 
       { 
       cat: 'category 1' 
       task : { title: "task 1", title: "task 2", title: "task 3"} 
       }, 
       { 
       cat: 'category 2' 
       task : { title: "task 1", title: "task 2", title: "task 3"} 
       } 
     ]

источник

2016-10-24 08:49:51 Jigar7521

, но создание JSON не под моим контролем, оно приходит ко мне, созданное именно так. –

Таким образом, вы можете нажимать свой json каждый раз, когда дело касается вас, как allTask .push ({title: «task 1», title: «task 2», title: «task 3»}); – Jigar7521

-1

создать компонент под названием ToDoList

angular. 
    module('TodoApp'). 
    component('todoList', { 
     template: 
     '<ul>' + 
      '<li ng-repeat="newTodo in $ctrl.newTodos ">' + 
      '<span>{{newTodo .title}}</span>' + 
       '<p>{{newTodo .cat}}</p>' + 
      '</li>' + 
     '</ul>', 
    controller: function TodoListController() { 
     this.newTodos = [ 
     { 
     title: "task 2", 
     cat: "category 1" 
     }, { 
     title: "task 2", 
     cat: "category 1" 
     } 
    ]; 
    } 
});

Затем создайте файл представления, как этот

<body ng-app="TodoApp">  
    < todo-list></todo-list> 
</body>

источник

2016-10-24 08:58:53

Почему директива? – Weedoze

Чтобы организовать наш код по области функций, а не по функциям. –

Это простой ng-repeat ... – Weedoze

Угловой Js ng-повторить итерацию над JSON

ответ

Смежные вопросы