Как выбрать данные из JSON средствами angular.js

215
12 апреля 2017, 12:11

Добрый день всем. Есть код, который выводит данные из jsonовского файла на страницу. Но он выводит полностью все содержимое файла. Мне требуется отсортировать данные. К примеру что бы выводилось всё где в блоке встречается ID "000000001". Подскажите пожалуйста как реализовать. Заранее благодарен!

<!DOCTYPE html> 
<html ng-app="countryApp"> 
<head> 
	<meta charset="utf-8"> 
	<title>Монитор готовности</title> 
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script> 
	<script> 
		var countryApp = angular.module('countryApp', []); 
		countryApp.controller('CountryCtrl', function ($scope, $http){ 
			$http.get('test.json').success(function(data) { 
				$scope.countries = data; 
			}); 
		}); 
	</script> 
<style> 
progress::-ms-fill {   border: none; } 
progress[value="100"]::-ms-fill {   background-color: #aaff00; } 
</style> 
 
</head> 
<body ng-controller="CountryCtrl"> 
	<h2>Монитор готовности объектов</h2 > 
	<table class="table table-striped"> 
		<tr> 
			<th>ID</th> 
			<th>Объекты</th> 
			<th>Процент готовности</th> 
			<th>Ввод в эксплуатацию</th> 
			<th>Текущее состояние</th> 
		</tr> 
		<tr ng-repeat="country in countries "> 
			<td>{{country.ID}}</td> 
			<td>{{country.Obj}}</td> 
			<td><meter id='p' max='100' value={{country.proc_gotov}}></meter>{{country.proc_gotov}}%</td> 
			<td>{{country.vvod}}</td> 
			<td>{{country.current}}</td> 
 
		</tr> 
	</table> 
</body> 
</html>

<!-- содежимое test.json --> 
	[ 
		{ 
			"ID": "000000001", 
			"Obj": "Данные об объекте 1", 
			"proc_gotov": "100", 
			"vvod": "01.10.2017", 
			"current": "В процессе" 
		}, 
		{ 
			"ID": "000000001", 
			"Obj": "Данные об объекте 1", 
			"proc_gotov": "100", 
			"vvod": "01.11.2017", 
			"current": "В процессе" 
		}, 
		{ 
			"ID": "000000001", 
			"Obj": "Данные об объекте 1", 
			"proc_gotov": "100", 
			"vvod": "01.12.2017", 
			"current": "В процессе" 
		}, 
		{ 
			"ID": "000000002", 
			"Obj": "Данные об объекте 2", 
			"proc_gotov": "10", 
			"vvod": "01.05.2018", 
			"current": "В процессе" 
		}, 
		{ 
			"ID": "000000002", 
			"Obj": "Данные об объекте 2", 
			"proc_gotov": "10", 
			"vvod": "01.05.2018", 
			"current": "В процессе" 
		}, 
		{ 
			"ID": "000000003", 
			"Obj": "Данные об объекте 3", 
			"proc_gotov": "100", 
			"vvod": "01.12.2016", 
			"current": "Готов" 
		}, 
		{ 
			"ID": "000000003", 
			"Obj": "Данные об объекте 3", 
			"proc_gotov": "100", 
			"vvod": "01.12.2016", 
			"current": "Готов" 
		}, 
		{ 
			"ID": "000000003", 
			"Obj": "Данные об объекте 3", 
			"proc_gotov": "100", 
			"vvod": "01.12.2016", 
			"current": "Готов" 
		} 
 
	]

Answer 1

Вставьте фильтр:

<tr ng-repeat="country in countries | filter: { ID: '000000001' }">
ПОСЛЕДНИЕ ВОПРОСЫ
Все вопросы
Подробнее о сайте hersones.com.ua
ТОП-10
READ ALSO
Резиновый input на остаток строки
HTML

Резиновый input на остаток строки

Как сделать, чтобы input занимал весь остаток строки сразу за label?

 181
адаптация рулетки js
HTML

адаптация рулетки js

 247
Защита сайта от спамеров. Input pattern
HTML

Защита сайта от спамеров. Input pattern

Добрый вечер!

 196
Как можно обратиться к элементу из списка условий для фильтра инфоблока в админке?
HTML

Как можно обратиться к элементу из списка условий для фильтра инфоблока в админке?

Делаю жесткий фильтр для пользователей по полю "Кто создал"Нужно что бы фильтр работал скрыто и пользователь не мог его отменить! Единственное...

 189