Question

我要做的是要求用户选择他们想要应用过滤器的属性。使用ng-repeat以表格形式显示数据。 enter image description here

我的代码如下所示：添加数据的表单： -

<form name="myform">
                        <div class="form-group">
                            <input type="text" class="form-control" id="name" placeholder="Name" ng-model="data.name" required>
                        </div>
                        <div class="form-group">
                            <input type="email" class="form-control" id="email" placeholder="Email" ng-model="data.email" required>
                        </div>
                        <div class="form-group">
                            <textarea class="form-control" id="comment" placeholder="Comment" ng-model="data.comment" required></textarea>
                        </div>
                        <div class="row">
                            <div class="col-xs-6">
                                <button type="submit" class="btn btn-primary" ng-disabled="myform.$invalid" ng-click="add(data)">Submit</button>
                            </div>
                            <div class="col-xs-6">.
                                <button type="submit" class="btn btn-default" ng-click="reset()" ng-disabled="myform.$invalid">Reset</button>
                            </div>
                        </div>
                    </form>

显示数据的表： -

<div class="col-sm-6 col-sm-offset-3" style="overflow-x:auto;">
            <div class="row">
                <div class="col-xs-6"> 
                    <select ng-options="key as value for (key, value) in keys" class="form-control" ng-model="filtercolumn">
                         <option value="">Select column</option>
                    </select>
                </div>
                <div class="col-xs-6">
                    <input type="text" class="form-control" ng-model="filtertxt" placeholder="filter">
                </div>
            </div>
            <br><br>
            <table class="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th>Sr</th>
                        <th>Date</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Comment</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="x in data | filter: {filtercolumn: filtertxt}">
                        <td>{{x.sr}}</td>
                        <td>{{x.date}}</td>
                        <td>{{x.name}}</td>
                        <td>{{x.email}}</td>
                        <td>{{x.comment}}</td>
                    </tr>
                </tbody>
            </table>
        </div>

这是控制器：

app.controller("ctrl", ["$scope", function($scope){
    var i = 0;
    $scope.keys =  {"sr": 'Sr', "date": 'Date', "name": 'Name', "email": 'Email', "comment": 'Comment'};
    $scope.data = [];

    $scope.add = function(data){
        $scope.data.push({
            "sr": i++,
            "date": new Date().toDateString(),
            "name": data.name,
            "email": data.email,
            "comment": data.comment
        });
        $scope.data.name = "";
        $scope.data.email = "";
        $scope.data.comment = "";
    };

    $scope.reset = function(){
        $scope.data.name = "";
        $scope.data.email = "";
        $scope.data.comment = "";
    };
}]);

因为我是棱角分明的新人，可能是我错过了一些概念。

提前致谢

Answer 1

试试这个：

<div class="col-sm-6 col-sm-offset-3" style="overflow-x:auto;">
            <div class="row">
                <div class="col-xs-6"> 
                    <select ng-options="key as value for (key, value) in keys" ng-change="change()" class="form-control" ng-model="filtercolumn">
                         <option value="">Select column</option>
                    </select>
                </div>
                <div class="col-xs-6">
                    <input type="Search" class="form-control" ng-init="filtercolumn= ''; filtertxt= ''" ng-model="filtertxt[filtercolumn]" placeholder="search..">
                </div>
            </div>
            <br><br>
            <table class="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th>Sr</th>
                        <th>Date</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Comment</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="x in data | filter: filtertxt">
                        <td>{{x.sr}}</td>
                        <td>{{x.date}}</td>
                        <td>{{x.name}}</td>
                        <td>{{x.email}}</td>
                        <td>{{x.comment}}</td>
                    </tr>
                </tbody>
            </table>
        </div>

这是控制器：

app.controller("ctrl", ["$scope", function($scope){
    var i = 0;
    $scope.keys =   {"sr": 'Sr', "date": 'Date', "name": 'Name', "email": 'Email', "comment": 'Comment'};
    $scope.data = [];

    $scope.add = function(data){
        $scope.data.push({
            "sr": i++,
            "date": new Date().toDateString(),
            "name": data.name,
            "email": data.email,
            "comment": data.comment
        });
        $scope.data.name = "";
        $scope.data.email = "";
        $scope.data.comment = "";
    };
    $scope.filtercolumn = '';
    $scope.change = function() {
                        $scope.filtertxt = '';
                    };

    $scope.reset = function(){
        $scope.data.name = "";
        $scope.data.email = "";
        $scope.data.comment = "";
    };
}]);

这将搜索所选columnName的输入文本。

Answer 2

因此控制器代码和HTML存在一些问题。

首先（也是最重要的）

不要使用$scope个变量。将变量分配给控制器并使用controllerAs语法，例如ng-controller="myController as myCtrl"。我的答案的其余部分是基于使用myCtrl作为HTML中的控制器对象。这是使用控制器分配的变量而不是$scope更新的控制器代码（注意：我将控制器重命名为myController，以避免使用ng-controller语法在as中出现歧义）：

app.controller("myController", function($scope)
{
    // need a reference to 'this' to use inside functions
    var self = this;
    var i = 0;

    self.keys =   {"sr": 'Sr', "date": 'Date', "name": 'Name', "email": 'Email', "comment": 'Comment'};
    self.data = [];

... the rest of your controller

<强>第二

您使用与表单的数组和对象相同的$scope.data。这不容易看到，因为您正在使用$scope分配。将另一个输入变量添加到控制器：

self.formInput = {}

然后在您的表单中，将所有ng-model指令更改为ng-model="myCtrl.formInput.whatever"

<强>第三

现在再次更新add功能 - 再次指定为Controller变量，而不是$scope：

self.add = function(data)
{
    self.data.push({
        "sr": i++,
        "date": new Date().toDateString(),
        "name": self.formInput.name,
        "email": self.formInput.email,
        "comment": self.formInput.comment
    });

    // now clear the inputs on the form
    self.formInput.name = "";
    self.formInput.email = "";
    self.formInput.comment = "";
};

<强>四

现在更新您的HTML以使用myCtrl变量而不是$scope。因此，对于Select对象中的ng-options语句：

ng-options="key as value for (key, value) in myCtrl.keys"

对于你的转发器：

<tr ng-repeat="x in myCtrl.data | filter: {filtercolumn: filtertxt}">

最后你的表格的“添加”按钮：

ng-click="myCtrl.add(data)"

您可以在当前范围内访问filtercolumn和filtertxt变量，因为它们仅在HTML中使用，并自动与ng-model绑定。如果您需要访问控制器中的那些，建议将它们添加为控制器变量，如新的self.formInput变量。就个人而言，我会这样做，因为例如，使用ng-if会使页面的其余部分无法访问这些模型绑定变量。将变量放在控制器中只是一种很好的做法。

angularjs - 对对象

2 个答案: