https://blog.csdn.net/xin_x1n/article/details/53070144
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
<title></title>
</head>
<body>
<div ng-app="myApp1" ng-controller="myCtrl1" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<p>循環對象:</p>
<table ng-repeat="y in names">
<tr>
<td>
<input value="{{ y.name }}" />
</td>
<td>{{ y.country }}</td>
<td>
<input type="button" ng-click="count = count + 1" value="{{ y.name + ', ' + y.country }}" /></td>
</tr>
</table>
<table>
<tr>
<th>id</th>
<th>productname</th>
<th>productid</th>
<th>
<input ng-click="add()" value="add" /></th>
</tr>
<tbody ng-repeat="z in arrs">
<tr>
<td>{{$index}}</td>
<td>
<input ng-model="z.productid" value="{{z.productid}}"></td>
<td>
<input ng-model="z.productname" value="{{z.productname}}"></td>
<td>
<input ng-click="updata($index)" value="update" /></td>
</tr>
</tbody>
</table>
<button ng-click="count = count + 1">點我！</button>
<p>{{ count }}</p>
</div>
<%--<div ng-app="myApp2" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">
<p>循環對象:</p>
<table ng-repeat="y in names">
<tr>
<td>
<input value="{{ y.name }}" />
</td>
<td>{{ y.country }}</td>
<td>
<input type="button" /></td>
</tr>
</table>
<ul>
<li ng-repeat="x in names">{{ x.name + ', ' + x.country }}</li>
</ul>
</div>--%>
<script>
var app = angular.module('myApp1', []);
app.controller('myCtrl1', function ($scope) {
//$scope表示作用域對象，每個控制器都有自己的作用域對象
$scope.arrs = [
{ "productid": "FI-SW-01", "productname": "Koi" },
{ "productid": "K9-DL-01", "productname": "Dalmation" },
{ "productid": "RP-SN-01", "productname": "Rattlesnake" },
{ "productid": "RP-LI-02", "productname": "Iguana" },
{ "productid": "FL-DSH-01", "productname": "Manx" },
{ "productid": "FL-DLH-02", "productname": "Persian" },
{ "productid": "AV-CB-01", "productname": "Amazon Parrot" }
];
//定義一個空對象 , 用於更新和保存數據時臨時存儲
$scope.prod = {};
//定義一個全局變量idx , 用於存儲選中行的索引，方便執行保存操作時保存數據
var idx = -1;
//定義一個單擊修改按鈕時觸發的事件，用於單擊后彈出模塊窗口用於修改數據
$scope.updata = function ($index) {
////顯示bootstrap中的模塊窗口
//$('#modal-1').modal('show');
//將選中行的數據綁定到臨時對象prod中，在下面的模態窗口中展示出來
$scope.prod.productid = $scope.arrs[$index].productid;
$scope.prod.productname = $scope.arrs[$index].productname;
//選中行的索引賦值給全局變量idx
idx = $index;
alert($scope.prod.productid)
};
//定義一個單機保存按鈕時觸發的事件,
$scope.save = function () {
//將修改后的值賦給數組
$scope.arrs[idx].productid = $scope.prod.productid;
$scope.arrs[idx].productname = $scope.prod.productname;
//關閉模塊窗口
//$('#modal-1').modal('hide');
}
$scope.add = function () {
$scope.arrs.push({ "productid": "2222", "productname": "33333t" })
}
$scope.count = 0;
});
</script>
</body>
</html>