I am doing a simple cart system.
I created a table to display the products with add to cart button on the side of every product. I was able to get the index of every product when I click the button but I can't fetch the data inside the object(the name, price, and qty). Please help! How can I get them? Thanks.
< script >
var app = angular.module("shoppingCart", []);
app.controller("cartCtrl", function($scope) {
$scope.products = [{
id: 1,
name: 'Baby Mix Lobster (300g - down)',
unit: 'per kg',
price: 2500,
qty: 1
},
{
id: 2,
name: 'Tiger Lobster (1kg - up)',
unit: 'per kg',
price: 5800,
qty: 1
},
{
id: 3,
name: 'Tiger Lobster (700g - 999g)',
unit: 'per kg',
price: 4500,
qty: 1
},
{
id: 4,
name: 'Tiger Lobster (500g-699g)',
unit: 'per kg',
price: 4200,
qty: 1
},
{
id: 5,
name: 'Tiger Lobster (300g-499g)',
unit: 'per kg',
price: 3900,
qty: 1
},
];
$scope.addToCart = function(item) {
alert(item);
}
});
<
/script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table style="border: 1px solid black">
<tr>
<th></th>
<th>name</th>
<th>unit</th>
<th>price</th>
<th>Qty</th>
<th></th>
</tr>
<tr ng-repeat="x in products">
<td>{{$index + 1}}</td>
<td>{{x.name}}</td>
<td>{{x.unit}}</td>
<td>{{x.price | currency: "Php " : 2}}</td>
<td><input type="number" min="1" placeholder="{{x.qty}}" /></td>
<td><button ng-click="addToCart($index)">Add to Cart</button></td>
</tr>
</table>
</div>
need to pass the item x instead of the index
ng-click="addToCart(x)"
If you are able to get the index, then why not fetch the object from the array?
$scope.addToCart = function(index) {
var item = $scope.products[index];
// access the properties of `item` here.
}
Also, it is recommended to track the items of ng-repeat:
ng-repeat="x in products track by $index"
Related
I'm trying to make function that will save changes made in select form and apply them to my table.
In table I'm displaying name, designation and company of employees. I want to use select form to select the name of company. When I select company name and then click save button as result I only want to display names, designations and company of employees that work for that selected company. Also I want to display number of rows left in table after filtering the table.
Code I have so far is here:
data.html
<div ng-app="MyApp" ng-controller="MyController">
<div>
<table>
<tr>
<th style="width:10%">#</th>
<th style="width:20%">Name</th>
<th style="width:40%">Designation</th>
<th style="width:30%">Company</th>
</tr>
<tr ng-repeat="employee in clients | filter:searchText">
<td>{{$index + 1}}</td>
<td>{{employee.name}}</td>
<td>{{employee.designation}}</td>
<td>{{employee.company.name}}</td>
</tr>
</table>
</div>
<div>
<h2>Select Company:</h2>
<select ng-model="searchText.company.name">
<option ng-repeat="c in clients" value="{{c.company.name}} ">{{c.company.name}}</option>
</select>
<h3>You selected: {{searchText.company.name}</h3>
<button ng-click="updateSearch()">Save</button>
<b>input: {{searchText.company.name}}</b>
</div>
</div>
data.js
var controllers = angular.module('MyApp', [])
controllers.controller('MyController', function ($scope) {
$scope.clients = [{
name: 'Brett',
designation: 'Software Engineer',
company: {
name: 'Apple'
}
}, {
name: 'Steven',
designation: 'Database Administrator',
company: {
name: 'Google'
}
}, {
name: 'Jim',
designation: 'Designer',
company: {
name: 'Facebook'
}
}, {
name: 'Michael',
designation: 'Front-End Developer',
company: {
name: 'Apple'
}
}, {
name: 'Josh',
designation: 'Network Engineer',
company: {
name: 'Google'
}
}, {
name: 'Ellie',
designation: 'Internet Marketing Engineer',
company: {
name: 'Apple'
}
}];
$scope.updateSearch = function() {
console.log($scope.searchText.company.name);
}
});
Now I'm selecting company name immediately after choosing it from select form, but I want it to be applied after clicking on save button.
If anybody can help, thanks!
Hope this below code snippet helps you ! Its pretty much self explanatory.
UPDATE
To display count use below syntax in ng-repeat
<tr ng-repeat="employee in filteredList = (clients | filter:searchText)">
var controllers = angular.module('MyApp', [])
controllers.controller('MyController', function($scope) {
$scope.selected ={};
$scope.searchText ={}
$scope.searchText.company={};
$scope.filteredList =[];
$scope.clients = [{
name: 'Brett',
designation: 'Software Engineer',
company: {
name: 'Apple'
}
}, {
name: 'Steven',
designation: 'Database Administrator',
company: {
name: 'Google'
}
}, {
name: 'Jim',
designation: 'Designer',
company: {
name: 'Facebook'
}
}, {
name: 'Michael',
designation: 'Front-End Developer',
company: {
name: 'Apple'
}
}, {
name: 'Josh',
designation: 'Network Engineer',
company: {
name: 'Google'
}
}, {
name: 'Ellie',
designation: 'Internet Marketing Engineer',
company: {
name: 'Apple'
}
}];
$scope.orginalList = angular.copy($scope.clients);
$scope.updateSearch = function() {
$scope.searchText.company.name = $scope.selected.company;
}
});
<script data-require="angularjs#1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<div ng-app="MyApp" ng-controller="MyController">
<div>
<table>
<tr>
<th style="width:10%">#</th>
<th style="width:20%">Name</th>
<th style="width:40%">Designation</th>
<th style="width:30%">Company</th>
</tr>
<tr ng-repeat="employee in filteredList = (clients | filter:searchText)">
<td>{{$index + 1}}</td>
<td>{{employee.name}}</td>
<td>{{employee.designation}}</td>
<td>{{employee.company.name}}</td>
</tr>
</table>
Count : {{filteredList.length}}/{{orginalList.length}}
</div>
<div>
<h2>Select Company:</h2>
<select ng-model="selected.company">
<option ng-repeat="c in clients" value="{{c.company.name}} ">{{c.company.name}}</option>
</select>
<h3>You selected: {{selected.company}}</h3>
<button ng-click="updateSearch()">Save</button>
<b>input: {{searchText.company.name}}</b>
</div>
</div>
Is that you want?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
</head>
<body>
<div ng-app="MyApp" ng-controller="MyController">
<div>
<table>
<tr>
<th style="width:10%">#</th>
<th style="width:20%">Name</th>
<th style="width:40%">Designation</th>
<th style="width:30%">Company</th>
</tr>
<tr ng-repeat="employee in clients | filter:searchText">
<td>{{$index + 1}}</td>
<td>{{employee.name}}</td>
<td>{{employee.designation}}</td>
<td>{{employee.company.name}}</td>
</tr>
</table>
</div>
<div>
<h2>Select Company:</h2>
<select ng-model="searchText1.company.name">
<option ng-repeat="c in clients" value="{{c.company.name}} ">{{c.company.name}}</option>
</select>
<h3>You selected: {{searchText.company.name}</h3>
<button ng-click="updateSearch()">Save</button>
<b>input: {{searchText.company.name}}</b>
</div>
</div>
<script>
var controllers = angular.module('MyApp', [])
controllers.controller('MyController', function($scope) {
$scope.clients = [{
name: 'Brett',
designation: 'Software Engineer',
company: {
name: 'Apple'
}
}, {
name: 'Steven',
designation: 'Database Administrator',
company: {
name: 'Google'
}
}, {
name: 'Jim',
designation: 'Designer',
company: {
name: 'Facebook'
}
}, {
name: 'Michael',
designation: 'Front-End Developer',
company: {
name: 'Apple'
}
}, {
name: 'Josh',
designation: 'Network Engineer',
company: {
name: 'Google'
}
}, {
name: 'Ellie',
designation: 'Internet Marketing Engineer',
company: {
name: 'Apple'
}
}];
$scope.updateSearch = function() {
$scope.searchText = $scope.searchText1.company.name;
console.log($scope.searchText.company.name);
}
});
</script>
</body>
</html>
Need some help with a select element in a Angular app I'm building.
Supposing I have the code below, what's the best way to change the property 'childId' of each item when selecting an option in the select element?
With the below code, when I select an element it will only set the 'child' property with the selected object and I can understand why. My only issue is that I also need to set the 'childId' property, so what's the right way to accomplish that?
<div ng-app="CustomApp" ng-controller="CustomCtrl">
<table class="table">
<thead>
<tr>
<th>Description</th>
<th>Child</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in dataItems">
<td>
<input name="Item[{{$index}}].Description"
value="{{item.description}}"
type="text"
class="form-control" />
</td>
<td>
<select name="Item[{{$index}}].Child"
ng-model="item.child"
ng-options="ichild as ichild.description for ichild in
$parent.childItems track by ichild.id">
<option value="">Select one option...</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
(function () {
"use strict";
var app = angular.module('CustomApp', []);
app.controller('CustomCtrl', ['$scope',
function($scope) {
$scope.dataItems = [
{ id: 1, description: 'foo one', childId: 1, child: { id: 1, description: 'bar01' }},
{ id: 2, description: 'foo two', childId: 0 },
{ id: 3, description: 'foo three, childId: 2, child: { id: 2, description: 'bar02' }}
];
$scope.childItems = [
{ id: 1, description: 'bar01' },
{ id: 2, description: 'bar02' }
];
}]);
})();
i think, this is what you want to do [actually i hope]:
<!doctype html>
<html>
<head>
</head>
<body>
<div ng-app="CustomApp" ng-controller="CustomCtrl">
<table class="table">
<thead>
<tr>
<th>Description</th>
<th>Child</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in dataItems">
<td>
<input name="Item[{{$index}}].description" ng-model="item.description" type="text" class="form-control" />{{item.description}}
</td>
<td>
<select name="Item[{{$index}}].child" ng-model="item.child" ng-options="ichild as ichild.description for ichild in $parent.childItems track by ichild.id"></select>
{{item.child}}
</td>
</tr>
</tbody>
</table>
</div>
<script src="/Scripts/angular.js"></script>
<script>
(function() {
"use strict";
var app = angular.module("CustomApp", []);
app.controller("CustomCtrl", ["$scope",
function($scope) {
$scope.dataItems = [{
id: 1,
description: "foo one",
childId: 1,
child: [{
id: 1,
description: "bar01"
}]
}, {
id: 2,
description: "foo two",
childId: 0
}, {
id: 1,
description: "foo three",
childId: 2,
child: [{
id: 2,
description: "bar02"
}]
}];
$scope.childItems = [{
id: 1,
description: "bar01"
}, {
id: 2,
description: "bar02"
}];
}
]);
})();
</script>
</body>
</html>
Here's a fiddle with the desired table and the Javascript function containing the array from where I want to populate the table, what I don't figure out is how, because if I use rowspan and colspan I have to create different <tr> for each product...
If there's another way to get the desired table I'd love to know about it... The main question here is: How could I use ng-repeat in a table that uses rowspan and colspan?
Also, the colspan and rowspan values at the <thead> can't be static as in the jsfiddle since each row may contain different amount of products... So the second question is: How could I dynamically set the rowspan value? they should be specified in each table row..
This is possible if you let the rowspan depend on inventory.length for the current transaction, and then you use nested ng-repeats.
Here we go:
var myApp = angular.module('myApp', []);
function MainCtrl($scope) {
var vm = $scope;
vm.hello = 123;
vm.transactions = [{
id: 1,
cost: 100,
transaction_type: { id: 1, name: 'Sell' },
client: { id: 2, name: 'XCLIENT' },
inventory: [
{ id: 1, quantity: 4, product: { id: 1, name: 'Cup' }, product_condition: { id: 2, name: 'New' } },
{ id: 2, quantity: 10, product: { id: 2, name: 'Shirt' }, product_condition: { id: 2, name: 'New' } }
]
}, {
id: 2,
cost: 40,
transaction_type: { id: 2, name: 'Buy' },
supplier: { id: 3, name: 'XSUPPLIER' },
inventory: [
{ id: 1, quantity: 2, product: { id: 1, name: 'Cup' }, product_condition: { id: 2, name: 'New' } },
{ id: 2, quantity: 5, product: { id: 6, name: 'Pants' }, product_condition: { id: 2, name: 'New' } }
]
}];
}
table,
th,
td {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<table ng-controller="MainCtrl">
<thead>
<div>
<tr>
<td rowspan=2>Movement</td>
<td colspan=3>Products</td>
<td rowspan=2>Supplier</td>
<td rowspan=2>Cost</td>
</tr>
<tr>
<td>Name</td>
<td>Quantity</td>
<td>Condition</td>
</tr>
</div>
</thead>
<tbody ng-repeat="t in transactions">
<tr>
<td rowspan="{{t.inventory.length}}">Sell</td>
<td>{{t.inventory[0].product.name}}</td>
<td>{{t.inventory[0].quantity}}</td>
<td>{{t.inventory[0].product_condition.name}}</td>
<td rowspan="{{t.inventory.length}}">XCLIENT</td>
<td rowspan="{{t.inventory.length}}">$100</td>
</tr>
<tr ng-repeat="item in t.inventory" ng-if="$index > 0">
<td>{{item.product.name}}</td>
<td>{{item.quantity}}</td>
<td>{{item.product_condition.name}}</td>
</tr>
</tbody>
</table>
</div>
(Fiddle)
Here it is the totally dynamic way including dynamic rowspan :
HTML:
<div ng-app>
<h3>Here's what I want it to be</h3>
<div ng-controller="MainCtrl">
<table >
<thead>
<tr>
<td rowspan='{{rowspan}}'>Movement</td>
<td colspan='{{rowspan}}'>Products</td>
<td rowspan='{{rowspan}}'>Supplier</td>
<td rowspan='{{rowspan}}'>Cost</td>
</tr>
<tr>
<td>Name</td>
<td>Quantity</td>
<td>Condition</td>
</tr>
</thead>
<tbody ng-repeat='t in transactions'>
<tr ng-init='invCustom=(t.invetory.splice(1))'>
<td rowspan='{{rowspan}}'>{{t.transaction_type.name}}</td>
<td>{{t.invetory[0].product.name}}</td>
<td>{{t.invetory[0].quantity}}</td>
<td>{{t.invetory[0].product_condition.name}}</td>
<td ng-if='$index==0' rowspan='{{rowspan}}'>{{t.client.name}}</td>
<td ng-if='$index==1' rowspan='{{rowspan}}'>{{t.supplier.name}}</td>
<td rowspan='{{rowspan}}'>{{ t.cost | currency }}</td>
</tr>
<tr ng-repeat='tsub in invCustom'>
<td>{{tsub.product.name}}</td>
<td>{{tsub.quantity}}</td>
<td>{{tsub.product_condition.name}}</td>
</tr>
</tbody>
</table>
</div>
<h4>This data isn't loaded from the controller, I'd like to know how to use ng-repead in this case</h4>
</div>
JS:
function MainCtrl($scope) {
//var vm = this;
$scope.rowspan = 3;
$scope.transactions = [{
id: 1,
cost: 100,
transaction_type: {
id: 1,
name: 'Sell'
},
client: {
id: 2,
name: 'XCLIENT'
},
invetory: [{
id: 1,
quantity: 4,
product: {
id: 1,
name: 'Cup'
},
product_condition: {
id: 2,
name: 'New'
}
}, {
id: 2,
quantity: 10,
product: {
id: 2,
name: 'Shirt'
},
product_condition: {
id: 2,
name: 'New'
}
},
{
id: 3,
quantity: 101,
product: {
id: 3,
name: 'Shirt_C'
},
product_condition: {
id: 3,
name: 'New_C'
}
}]
}, {
id: 2,
cost: 40,
transaction_type: {
id: 2,
name: 'Buy'
},
supplier: {
id: 3,
name: 'XSUPPLIER'
},
invetory: [{
id: 1,
quantity: 2,
product: {
id: 1,
name: 'Cup'
},
product_condition: {
id: 2,
name: 'New'
}
}, {
id: 2,
quantity: 5,
product: {
id: 6,
name: 'Pants'
},
product_condition: {
id: 2,
name: 'New'
}
},
{
id: 3,
quantity: 55,
product: {
id: 7,
name: 'Pants_C'
},
product_condition: {
id: 8,
name: 'New_C'
}
}]
}];
}
try below code and do not forgot to include angular JS library....
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js
"></script>
<div ng-app>
<h3>Here's what I want it to be</h3>
<div ng-controller="MainCtrl">
<table >
<thead>
<tr>
<td rowspan=2>Movement</td>
<td colspan=3>Products</td>
<td rowspan=2>Supplier</td>
<td rowspan=2>Cost</td>
</tr>
<tr>
<td>Name</td>
<td>Quantity</td>
<td>Condition</td>
</tr>
</thead>
<tbody ng-repeat='t in transactions' ng-init='i=0'>
<tr>
<td rowspan=2>{{t.transaction_type.name}}</td>
<td>{{t.invetory[i].product.name}}</td>
<td>{{t.invetory[i].quantity}}</td>
<td>{{t.invetory[i].product_condition.name}}</td>
<td ng-if='$index==0' rowspan=2>{{t.client.name}}</td>
<td ng-if='$index==1' rowspan=2>{{t.supplier.name}}</td>
<td rowspan=2>{{ t.cost | currency }}</td>
</tr>
<tr>
<td>{{t.invetory[i+1].product.name}}</td>
<td>{{t.invetory[i+1].quantity}}</td>
<td>{{t.invetory[i+1].product_condition.name}}</td>
</tr>
</tbody>
</table>
</div>
<h4>This data isn't loaded from the controller, I'd like to know how to use ng-repead in this case</h4>
</div>
How could I use ng-repeat in a table that uses rowspan and colspan?
Yes you can use, I will put a very basic example and not fix the entire thing for you.
<table>
<tr ng-repeat="item in mylist">
<td ng-if="someCondition2" rowspan="2">AAA</td>
<td ng-if="someCondition1" colspan="2">BBB</td>
<td ng-if="someCondition3">CCC</td>
<tr>
</table>
This way you can conditionally add rowspan or colspan where ever required, hope you get the idea.
var app = angular.module('app', ["angucomplete-alt"]);
app.controller('MainController', function($scope) {
$scope.countries = [
{name: 'Hosting 1', code: '100.00'},
{name: 'Hosting 2', code: '200.00'},
{name: 'Hosting 3', code: '300.00'},
{name: 'Hosting 4', code: '400.00'},
{name: 'Hosting 5', code: '500.00'},
{name: 'Hosting 6', code: '600.00'},
];
$scope.countrySelected = function(selected) {
//$scope.invoice.item.lol = 1;
window.alert('You have selected ' + selected.title);
};
$scope.taxesData = {
singleSelect: null,
availableOptions: [
{id: '6.50', name: '6,5%'},
{id: '16.00', name: '16%'},
{id: '23.00', name: '23%'}
],
selectedOption: {id: '23.00', name: '23%'}
};
$scope.invoice = {
items: [{
description: '',
}]
};
$scope.addItem = function() {
$scope.invoice.items.push({
description: '',
price: 10.99,
});
};
$scope.removeItem = function(index) {
$scope.invoice.items.splice(index, 1);
};
$scope.total = function() {
var total = 0;
angular.forEach($scope.invoice.items, function(item) {
total += item.qty * item.price;
})
return total;
};
$scope.taxtotal = function() {
var taxtotal = 0;
angular.forEach($scope.invoice.items, function(item) {
taxtotal += item.qty * item.price * item.taxesData.repeatSelect * 0.01;
})
return taxtotal;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!--ng-controller="MainController"-->
<div ng-app="app"><div ng-controller="MainController">
<table class="table table-condensed table-striped">
<tr>
<th>Product Name</th>
<th>Item Price</th>
<th>Qty</th>
<th>Tax Rate</th>
<th>Line Total</th>
<th>Line Taxes Total</th>
<th></th>
</tr>
<tr ng:repeat="item in invoice.items">
<td angucomplete-alt id="ex1" placeholder="Search countries" maxlength="50" pause="100" selected-object="selectedCountry" local-data="countries" search-fields="name" title-field="name" minlength="1" input-class="form-control form-control-small" match-class="highlight"></td>
<td><input type="text" value="{{selectedCountry.originalObject.code}}"></td>
<td><input type="text" ng:model="item.qty" ng:required class="input-mini"></td>
<!--<td><input type="text" ng:model="item.taxRate"class="input-small"></td>-->
<td>
<select name="repeatSelect" ng-model="item.taxesData.repeatSelect">
<option ng-repeat="option in taxesData.availableOptions" value="{{option.id}}">{{option.name}}</option>
</select>
</td>
<td>{{item.qty * item.mama | currency}}</td>
<td>{{item.qty * itme.mama * item.taxesData.repeatSelect * 0.01 | currency}}</td>
<td>
[<a href ng:click="removeItem($index)">X</a>]
</td>
</tr>
<tr>
<td><a href ng:click="addItem()" class="btn btn-small">add item</a></td>
<td></td>
<td>Totals:</td>
<td></td>
<td>{{total() | currency}}</td>
<td>{{taxtotal() | currency}}</td>
</tr>
</table>
</div>
</div></div>
As you can see in this jfiddle I am using angular with angucomplete-alt plugin to manage an order form.
I have a scope "countries" which feed the autocomplete box.
Now i am trying to ,
when choosing a country (product :P) i want the field Item Price to feeded with the correct value (e.g. if i select hosting 1, the Item price must completed with 100.00 value.
The problem is that :
1) If I set ng:model to this field (because I want to use the price for the totals) the field does not completed.
2) If I set just value="{{selectedCountry.originalObject.code}}, the field completed but I haven't a ng:object to use it for the totals.
It should be working if you set ng:model as the following, for your Price input field:
<input type="text" ng:model="selectedCountry.originalObject.code">
See working fiddle
What I'm trying to do is repeat three levels.
Demo: http://plnkr.co/edit/qXLcPHXDlOKZYI5jnCIp?p=preview
<table>
<thead>
<tr>
<td>Block</td>
<td>Column</td>
<td>Unit</td>
<td>Action</td>
</tr>
</thead>
<tbody ng-repeat="block in building.ownBlock">
<tr ng-repeat="column in block.ownColumn">
<td>{{block.name}}</td>
<td>{{column.number}}</td>
<td>{{unit.name}} - ? empty</td>
<td><button ng-click="edit(unit)">Edit</button></td>
</tr>
</tbody>
</table>
but I have failed to do so.
Collection
$scope.building =
{
id: 1,
name: 'first',
ownBlock: [
{
id: 1,
name: 'Block 1',
ownColumn: [
{
id: 1,
number: 'Column 1-1',
ownUnit: [
{
id: 1,
number: 'Unit 1-1-1'
},
{
id: 2,
number: 'Unit 1-1-2'
}
]
},
{
id: 2,
number: 'Column 1-2',
ownUnit: [
{
id: 3,
number: 'Unit 1-2-3'
},
{
id: 4,
number: 'Unit 1-2-4'
}
]
}
]
},
{
id: 2,
name: 'Block 2',
ownColumn: [
{
id: 3,
number: 'Column 2-3',
ownUnit: [
{
id: 5,
number: 'Unit 2-3-5'
},
{
id: 6,
number: 'Unit 2-3-6'
}
]
},
{
id: 4,
number: 'Column 2-4',
ownUnit: [
{
id: 7,
number: 'Unit 2-4-7'
},
{
id: 8,
number: 'Unit 2-4-8'
}
]
}
]
}
]
};
Using KnockoutJS I could use virtual repeaters eg.
<!-- ko foreach: items -->
<li data-bind="text: $data"></li>
<!-- /ko -->
I coded a directive, but 'ng-click="edit(unit)"' just doesn't work.
Maybe because I'm using element.replaceWith(html); to replace the directive HTML.
Any help is much appreciated.
Thank you
You could try something like this, depending on the steady state of your models.
<body>
<table>
<thead>
<tr>
<td>Block</td>
<td>Column</td>
<td ng-repeat="unit in building.ownBlock[0].ownColumn[0].ownUnit[0]">Unit</td>
<td>Action</td>
</tr>
</thead>
<tbody ng-repeat="block in building.ownBlock">
<tr ng-repeat="column in block.ownColumn">
<td>{{block.name}}</td>
<td>{{column.number}}</td>
<td ng-repeat="unit in column.ownUnit">{{unit.number}} - ? empty</td>
<td><button ng-click="edit(unit)">Edit</button></td>
</tr>
</tbody>
</table>
<pre>
{{toedit|json}}
</pre>
you will want to use the new ng-repeat-start and ng-repeat-end directives which were added in Angular 1.2. see the doco for examples.
http://docs.angularjs.org/api/ng.directive:ngRepeat