当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JavaScript开发指南_angularJS

JavaScript开发指南_angularJS

2019年06月03日  | 移动技术网IT编程  | 我要评论

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>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网