Angular.js在按钮单击时更改表数据

时间:2015-04-17 10:38:10

标签: asp.net-mvc angularjs

已经开始使用mvc中的Angular.js进行编码,我遇到了一个问题,如何让表格中的数据更改为按钮点击从提醒到客户信息让我说我显示的信息页面中的数据当我点击提醒时,点击客户,我想要提醒表中的数据。我也有一个问题,搜索是在计算数据库中的数字,但不是表格被过滤后显示的数字扔了一个搜索。任何帮助都会很大非常感谢。如果有人知道怎么做简单的分页,那将是完美的感谢。

<script>
        var MyApp = angular.module('MyApp', []);
        MyApp.controller('MyAppCtrl', function ($scope) {
            $scope.Info = [
              { "date":"23/09/2014","name": "john", "detail": "sssss" },
              { "date": "27/09/2014", "name": "mary", "detail": "gggggg"  }


            ];
$scope.remind = [
                  { "date":"23/09/2014", "detail": "milk" },
                  { "date": "27/09/2014","detail": "bread"  }


                ];
        $scope.sortField = 'name';//starting sort
        $scope.reverse = true;
        });


    </script>
    <div class="container" ng-app="MyApp">
        <div class="row" style="padding-top: 60px">
            <div class="panel panel-warning">
                <div class="panel-heading">Home

                </div>
                <div class="panel-body">

                    @*  left *@
                    <div class="col-md-4">
                        <div class="">

                            <div class="butLay">
                                @Html.ActionLink("Reminders", "Reminders", null, new { @class = "btn btn-warning btn-md" })
                            </div>
                        </div>
                        <div class="butLay">



                            @Html.ActionLink("Expected customer", "Expectedcustomer", null, new { @class = "btn btn-info btn-md" })
                        </div>

                    </div>


                    @*  Right side*@
                    <div class="pr col-md-6" ng-controller="MyAppCtrl">
                        Search:<input ng-model="query" type="text" />
                        <span class="label label-info">{{Info.length}} </span>
                        <table class="table table-striped table-hover ">
                            <thead>
                                <tr>
                                    <th><a href="" ng-click="sortField = 'date'; reverse = !reverse">Date</a></th>
                                    <th><a href="" ng-click="sortField = 'name'; reverse = !reverse">Name</a></th>
                                    <th><a href="" ng-click="sortField = 'detail'; reverse = !reverse">detail</a></th>
                                </tr>
                            </thead>
                            <tbody>


                                <tr ng-repeat="custom in Info| filter:query | orderBy:sortField:reverse">
                                    <td>{{custom.date}}</td>
                                    <td>{{custom.name}}</td>
                                    <td>{{custom.detail}}</td>              
                                </tr>                   
                            </tbody>
                        </table>
                        @*<ul class="pagination pagination-sm">
                            <li class="disabled"><a href="#">«</a></li>
                            <li><a href="#">1</a></li>
                            <li><a href="#">2</a></li>
                            <li><a href="#">3</a></li>
                            <li><a href="#">4</a></li>
                            <li><a href="#">5</a></li>
                            <li><a href="#">»</a></li>
                        @*</ul>*@


                    </div>

                </div>
                <table class="table table-condensed table-hover table-striped"></table>
            </div>
            @* of panel *@
        </div>
        @*of row*@
    </div>
    @* of container *@

1 个答案:

答案 0 :(得分:0)

你可以制作2张桌子,其中一张有

ng-if="variable==false";

另一个

ng-if="variable==true";

然后你用

做一个按钮
ng-click="myfunction(variable)"

并且在控制器中你有

$scope.myfunction = function(variable){

    if(variable == true){
         variable = false;
    }else{
         variable = true;
    }
}

所以,当你点击变量时,设置为true或false,并显示正确的内容

设置哪个表应显示默认值

ng-init="variable==true"

例如

希望这会有所帮助