|
Цитата:
|
|
пару примеров оттуда,
|
Думаю нет смысла репостить примеры с оф сайта. Свои горазд ценнее
График и таблица связанные общими данными,
демонстрирует наследование scope контролами tableController и chartController от mainController
<!doctype html>
<html ng-app>
<head>
<style>
.bar{
width:50px;
background-color:#0F0;
margin-right:5px;
float:left;
}
</style>
<script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script language="javascript" type="text/javascript">
function mainController($scope) {
// здесь будем хранить данные,
// благодаря тому что они обьявлены здесь ими могут пользоваться оба контролёра унаследовавших scope
$scope.items=[
{label:"Африка",val:25},
{label:"Европа",val:20}
];
}
function tableController($scope) {
//добавляет строку в таблицу
$scope.add=function(){
$scope.items.push({val:0});
};
// метод не позволяет выставить больше 100%
$scope.verife=function(item){
if (item.val>100) item.val=100;
if (item.val<0) item.val=0;
};
}
function chartController2($scope) {
}
</script>
</head>
<body ng-controller="mainController">
<div ng-controller="chartController2">
<div style="height:310px;background-color:#000;padding:5px;">
<div class="bar" ng-repeat="item in items" style="height:{{item.val*3}}px; margin-top:{{300-item.val*3}}px;">
{{item.val}}%
</div>
</div>
</div>
<div ng-controller="tableController">
<table>
<tr ng-repeat="item in items">
<td>
<input ng-model="item.label"/></td> <td><input ng-model="item.val" ng-change="verife(item)"/>%
</td>
</tr>
</table>
<button ng-click="add()">Добавить запись </button>
</div>
</body>
</html>