JavaScript开发指南_angularJS
程序员文章站
2022-09-11 15:12:22
javascript开发指南_angularjs。
html>
...
javascript开发指南_angularjs。
html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>titletitle>
<script src="js/angular1.4.6.min.js">script>
head>
<body>
<script>
angular.module('product', [])
.factory('productlist', function () {
return [
{id: 910, name: "imac", price: 15400},
{id: 80, name: "iphone", price: 5400},
{id: 29, name: "ipad", price: 1420},
{id: 500, name: "ipad air", price: 2340},
{id: 1200, name: "ipad mini", price: 2200}
]
})
.controller('productcontroller', function ($scope, productlist) {
/*$scope.search = "ipad";//定义一个变量
alert($scope.search);*/
$scope.productlist = productlist
$scope.ordercolumn = 'name'; //排序字段
$scope.ordersign = '-'; //为空时正序 为负号时倒序
$scope.sortproduct = function (sortcolumn) { //点击列标题排序事件
$scope.ordercolumn = sortcolumn;//觉得按照那一列进行排序
if ($scope.ordersign == "-") {
$scope.ordersign = "";
} else {
$scope.ordersign = '-';
}
};
//删除产品
$scope.delproduct = function (name) {
//alert(name);
if (name != "") {
if (confirm("是否删除" + name + "商品")) {
var p;
for (index in $scope.productlist) {
p = $scope.productlist[index];
if (p.name == name) {
$scope.productlist.splice(index, 1);
}
}
}
}
}
});
script>
<center>
<p class="container" ng-app="product" ng-controller="productcontroller">
<nav>
<p >
<p id="bs-example-navbar-collapse-1">
<p>
<input type="text" ng-model="search" placeholder="产品名称">
产品价格:
<select>
<option>1000-2000option>
select>
p>
p>
p>
nav><br />
<table border="1 solid" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th ng-click="sortproduct('id')">
产品编号
th>
<th ng-click="sortproduct('name')">
产品名称
th>
<th ng-click="sortproduct( 'price')">
产品价格
th>
<th>
操作
th>
tr>
thead>
<tbody>
<tr ng-repeat="item in productlist | filter:{ 'name':search} | orderby:(ordersign+ordercolumn) ">
<td>
{{item.id}}
td>
<td>
{{item.name}}
td>
<td>
{{item.price | currency:'(rmb)'}}
td>
<td>
<button ng-click="delproduct(item.name)">删除button>
td>
tr>
tbody>
table>
p>
center>
body>
html>