Angular 中过滤 select 列表中的 option

当前位置：主页 > 学无止境 > WEB前端 > Angular >

Vue React JavaScript Angular CSS HTML

Angular 中过滤 select 列表中的 option

作者：迹忆客最近更新：2023/03/23 浏览次数：

ng-options 是一个指令，可以更轻松地创建 HTML 下拉框，用于从一个数组中选择一个将被保存到模型中的项。它通过分析 ng-options 评估表达式并返回一个数组或对象，动态构造了选项元素列表。

此外，ng-options 指令还在 Angular 中创建了一个选择元素。它可以根据用户的输入过滤项目列表。

在 Angular 中过滤选择列表选项的步骤如下：

首先，在终端中运行以下命令创建 Angular 项目。

ng new angular_filter_select

创建一个将通过 ng-options 进行过滤的选择组件。

ng g c SelectFilter

最后，向组件添加一个选择器，并传递将用于过滤的表达式。表达式使用名为 ng-model 的属性传递，该属性应与正在过滤的变量名匹配。

使用以上步骤，以下是 ng-options 过滤的示例。

TypeScript 代码：

var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
    $scope.CountryName =[{"countryName":"England","isDisabled":false},
    {"countryName":"Netherlands","isDisabled":false},
    {"countryName":"USA","isDisabled":false},
    {"countryName":"China","isDisabled":false},
    {"countryName":"India","isDisabled":false}];
});

HTML 代码：

<html ng-app="plunker">
<head>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <script data-require="angular.js@1.5.x" src="https://code.angularjs.org/1.5.8/angular.js" data-semver="1.5.8"></script>
    <script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
    <H2>
        Example of Using Filter with ng-options
    </H2>
        <select
    ng-options="country.countryName as country.countryName disable when country.isDisabled for country in CountryName |filter:{isDisabled:false}"
    ng-model="myCountry">
        <option value="">Select a Country</option>
    </select>
</body>
</html>

单击此处查看上述代码的实时演示。

上一篇：Angular 中的电子邮件验证

下一篇：Angular 中按照对象属性过滤

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：