Question

我试图创建一个函数来保存在select表单中所做的更改并将它们应用到我的表中。在表I中显示员工的姓名，名称和公司。我想使用选择表单来选择公司名称。当我选择公司名称然后单击保存按钮作为结果时，我只想显示为所选公司工作的员工的姓名，名称和公司。此外，我想在过滤表格后显示表格中剩余的行数。

我到目前为止的代码在这里：

data.html

<div ng-app="MyApp" ng-controller="MyController">

<div>
        <table>
        <tr>
            <th style="width:10%">#</th>
            <th style="width:20%">Name</th>
            <th style="width:40%">Designation</th>
            <th style="width:30%">Company</th>
        </tr>
        <tr ng-repeat="employee in clients | filter:searchText">
        <td>{{$index + 1}}</td>
        <td>{{employee.name}}</td>
        <td>{{employee.designation}}</td>
        <td>{{employee.company.name}}</td>
        </tr>
        </table>

 </div>  

    <div>

       <h2>Select Company:</h2>

            <select ng-model="searchText.company.name">
            <option ng-repeat="c in clients" value="{{c.company.name}} ">{{c.company.name}}</option>
            </select>

            <h3>You selected: {{searchText.company.name}</h3>

        <button ng-click="updateSearch()">Save</button>
        <b>input: {{searchText.company.name}}</b>
    </div>

</div>

data.js

var controllers = angular.module('MyApp', [])
        controllers.controller('MyController', function  ($scope) {


              $scope.clients = [{
                    name: 'Brett',
                    designation: 'Software Engineer',
                    company: {
                        name: 'Apple'
                    }
                }, {
                    name: 'Steven',
                    designation: 'Database Administrator',
                    company: {
                        name: 'Google'
                    }
                }, {
                    name: 'Jim',
                    designation: 'Designer',
                    company: {
                        name: 'Facebook'
                }
                }, {
                    name: 'Michael',
                    designation: 'Front-End Developer',
                    company: {
                        name: 'Apple'
                }
                }, {
                    name: 'Josh',
                    designation: 'Network Engineer',
                    company: {
                        name: 'Google'
                }
                }, {
                    name: 'Ellie',
                    designation: 'Internet Marketing Engineer',
                    company: {
                        name: 'Apple'
                }
                }];


                     $scope.updateSearch = function() {
                    console.log($scope.searchText.company.name);

    }

        });

现在我从选择表单中选择公司名称后立即选择公司名称，但我希望在点击保存按钮后应用公司名称。如果有人可以提供帮助，谢谢！

Answer 1

希望以下代码段可以帮助您！它非常自我解释。

<强>更新

要在ng-repeat

中显示语法以下的语法

<tr ng-repeat="employee in filteredList = (clients | filter:searchText)">

var controllers = angular.module('MyApp', [])
controllers.controller('MyController', function($scope) {

  $scope.selected ={};
  $scope.searchText ={}
  $scope.searchText.company={};
 $scope.filteredList =[];
  $scope.clients = [{
    name: 'Brett',
    designation: 'Software Engineer',
    company: {
      name: 'Apple'
    }
  }, {
    name: 'Steven',
    designation: 'Database Administrator',
    company: {
      name: 'Google'
    }
  }, {
    name: 'Jim',
    designation: 'Designer',
    company: {
      name: 'Facebook'
    }
  }, {
    name: 'Michael',
    designation: 'Front-End Developer',
    company: {
      name: 'Apple'
    }
  }, {
    name: 'Josh',
    designation: 'Network Engineer',
    company: {
      name: 'Google'
    }
  }, {
    name: 'Ellie',
    designation: 'Internet Marketing Engineer',
    company: {
      name: 'Apple'
    }
  }];
 $scope.orginalList = angular.copy($scope.clients);

  $scope.updateSearch = function() {
   $scope.searchText.company.name = $scope.selected.company;

  }

});

<script data-require="angularjs@1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>


<div ng-app="MyApp" ng-controller="MyController">

  <div>
    <table>
      <tr>
        <th style="width:10%">#</th>
        <th style="width:20%">Name</th>
        <th style="width:40%">Designation</th>
        <th style="width:30%">Company</th>
      </tr>
      <tr ng-repeat="employee in filteredList = (clients | filter:searchText)">
        <td>{{$index + 1}}</td>
        <td>{{employee.name}}</td>
        <td>{{employee.designation}}</td>
        <td>{{employee.company.name}}</td>
      </tr>
    </table>
    Count : {{filteredList.length}}/{{orginalList.length}}
  </div>

  <div>

    <h2>Select Company:</h2>

    <select ng-model="selected.company">
      <option ng-repeat="c in clients" value="{{c.company.name}} ">{{c.company.name}}</option>
    </select>

    <h3>You selected: {{selected.company}}</h3>

    <button ng-click="updateSearch()">Save</button>
    <b>input: {{searchText.company.name}}</b>
  </div>

</div>

Answer 2

你想要的吗？

<!DOCTYPE html>
<html>

<head>

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

</head>

<body>
  <div ng-app="MyApp" ng-controller="MyController">

    <div>
      <table>
        <tr>
          <th style="width:10%">#</th>
          <th style="width:20%">Name</th>
          <th style="width:40%">Designation</th>
          <th style="width:30%">Company</th>
        </tr>
        <tr ng-repeat="employee in clients | filter:searchText">
          <td>{{$index + 1}}</td>
          <td>{{employee.name}}</td>
          <td>{{employee.designation}}</td>
          <td>{{employee.company.name}}</td>
        </tr>
      </table>

    </div>

    <div>

      <h2>Select Company:</h2>

      <select ng-model="searchText1.company.name">
        <option ng-repeat="c in clients" value="{{c.company.name}} ">{{c.company.name}}</option>
      </select>

      <h3>You selected: {{searchText.company.name}</h3>

      <button ng-click="updateSearch()">Save</button>
      <b>input: {{searchText.company.name}}</b>
    </div>

  </div>
  <script>
    var controllers = angular.module('MyApp', [])
     controllers.controller('MyController', function($scope) {


      $scope.clients = [{
        name: 'Brett',
        designation: 'Software Engineer',
        company: {
          name: 'Apple'
        }
      }, {
        name: 'Steven',
        designation: 'Database Administrator',
        company: {
          name: 'Google'
        }
      }, {
        name: 'Jim',
        designation: 'Designer',
        company: {
          name: 'Facebook'
        }
      }, {
        name: 'Michael',
        designation: 'Front-End Developer',
        company: {
          name: 'Apple'
        }
      }, {
        name: 'Josh',
        designation: 'Network Engineer',
        company: {
          name: 'Google'
        }
      }, {
        name: 'Ellie',
        designation: 'Internet Marketing Engineer',
        company: {
          name: 'Apple'
        }
      }];


      $scope.updateSearch = function() {
        $scope.searchText = $scope.searchText1.company.name;
        console.log($scope.searchText.company.name);

      }

    });
  </script>
</body>


</html>

如何创建将保存选择表单中的更改的函数，并使用AngularJs将它们应用于表

2 个答案: