HTML、angularJS テーブルコンテンツの並べ替え、[削除] をクリック、現在のコンテンツを削除、コンテンツを入力してコンテンツを含むデータを表示

	TWaver HTML5 がリリースされてからしばらく経ちますが、徐々に利用者が増えています。

それで、小さなウェブページを書くための試用版を申請するのが待ちきれませんでした.

最近は、データクエリとテーブル表示関数を書いています。表コンポーネントはHTML5 で提供され、

TWaver が提供するデモをチェックしてください。まだ多くのテーブルが使用されています。

そこで、デモの 1 つを参照して、新しいテーブルを作成し、テーブルに値を割り当てました。

すぐにフォームが生成されます。

以下は参考のためのケースです!!!

<!DOCTYPE html > 
< html lang= "en" > 
< head > 
    < meta charset= "UTF-8" > 
    < title > 2週目の演習</ title > 
    //guided js package < script src= "angular. js" ></ script > < script > var app = angular . module ( "myApp" ,[]);
         app . controller ( "myCtrl" ,
    
    
        関数($scope) {
            $scope. cpzong = [
                { id : 80 ,
                     name : "iphone" ,
                     money : 5400
 },
                { id : 1200 ,
                     name : "ipad mini" ,
                     money : 2200
 },
                { id : 500 ,
                     name : "ipad air" ,
                    
                                    
                                    
                    お金: 2340
                 },
                { id : 29 ,
                     name : "ipad" ,
                     money : 1420
 },
                { id : 910 ,
                     name : "imac" ,
                     money : 15400
 }
                ]; 
            $スコープ。sortFlag = "-" ; 
            $スコープ。sortName = "名前" ;
            ///
                                    
                                    ソート関数の定義
            $scope.sortProducts= function (clomnName) {
                $ scope.sortName = clomnName;
                 if ($scope.sortFlag == " -" ) {
                    $ scope.sortFlag = "" ;
                } else {
                    $ scope.sortFlag = " -" ;
                }
            } //指定した商品を削除
$scope. deleteProduct = function (name) {
                 for (
                        $scope のインデックス。cpzong ){
                     if ($scope.cpzong [インデックス] .name == name){
                        $scope. cpzong . スプライス(インデックス, 1 ); 
                    }
                }
            } //全部删除
$scope. deleteAll =関数() {
                $scope. cpzong = null ; 
            }
        }); </スクリプト> </
                        
    
head>
<body ng-app="myApp" ng-controller="myCtrl">
    <center>
        <input type="text" ng-model="serach" placeholder="产品名称" />
        <button ng-click="deleteAll()">删除全部</button><br/><br/>
        <table id="tab" border="1px" cellpadding="10px" cellspacing="0px">
            <tr>
                <th ng-click="sortProducts('id')">产品编号</th>
                <th ng-click="sortProducts('name')">产品名称</th>
                <th ng-click="sortProducts('money')">产品价格</th>
                <th>功能</th>
            </tr>
            <tr ng-repeat="goodsでcpzong | フィルター:検索 | orderBy :( sortFlag + sortName )" > 
                < td > {
  
  {
  商品.id}} </ td > < td > {
  {
  商品.name}} </ td > < td > {
  {
  商品.お金}} </ td > < td >< a ng-click= " deleteProduct (
  
                
  
  
                
  
  
                goods.name)">删除</a></td>
            </tr>
        </table>
    </center>
</body>
</html>

完毕

HTML、angularJS テーブル コンテンツの並べ替え、[削除] をクリック、現在のコンテンツを削除、コンテンツを入力してコンテンツを含むデータを表示

おすすめ

HTML、angularJS テーブルコンテンツの並べ替え、[削除] をクリック、現在のコンテンツを削除、コンテンツを入力してコンテンツを含むデータを表示