Question

在表格中，我显示员工的姓名，名称和公司。我想使用选择表单来选择公司名称。当我选择公司名称然后单击保存按钮作为结果时，我只想显示例如为Google工作的员工的姓名，名称和公司。另外，我想显示有多少员工的数量。

但是kinnda被卡住我的保存按钮不起作用，而且也没有雇员人数。

file.html

<body 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">
            <td>{{$index + 1}}</td>
            <td>{{employee.name}}</td>
            <td>{{employee.designation}}</td>
            <td>{{employee.company.name}}</td>
            </tr>
            </table>

     </div>  
 <div>
    <ul>
       <li>
       <h2>Select Company:</h2>

            <select ng-model="selectedCompany">
            <option ng-repeat="c in companyList" value="{{c.name}}">{{c.name}}</option>
            </select>

            <h3>You selected: {{selectedCompany}}</h3>


        </li>
    </ul>
        <button ng-click="$ctrl.updateSearch()">Filter</button>
    </div>
</body>

file.js

var controllers = angular.module('MyApp.controllers', [])
        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.companyList = [{
                         name: 'Apple',
                        slug: 'Apple'
                         }, {
                        name: 'Google',
                        slug: 'Google'
                        }, {
                        name: 'Microsoft',
                        slug: 'Microsoft'
                        }, {
                         name: 'Facebook',
                        slug: 'Facebook'
                        },

                    ];
                     $scope.updateSearch = function() {
                    console.log($scope.selectedCompany);

    }

        });

Answer 1

您的视图需要进行少量更改，将模型变量更改为与数组名称不同，例如colorn，sizen和brandn。

<div>
  <label>Color:</label>
  <select  ng-model="colorn" ng-options="option.name for option in colorStatus track by option.slug"></select>
</div>
 <div>
  <label>Size</label>
  <select ng-model="sizen" ng-options="option.name for option in size track by option.slug"></select>
</div>
<div>
  <label>Brand</label>
  <select ng-model="brandn" ng-options="option.name for option in $ctrl.brand track by option.slug"></select>
</div>
  <button ng-click="updateSearch()">Save</button>

您也可以使用$ scope变量

获取值

<强>控制器

$scope.updateSearch = function(){
console.log($scope.colorn);
console.log($scope.sizen);
console.log($scope.sizen);
}

<强> DEMO

Angulajs：如何在单击保存按钮后使用选择表单应用过滤器？

1 个答案: