简体   繁体   English

使用首字母过滤AngularJS <select></select> html标签

[英]Filtering AngularJS By First Letter Using <select></select> html tag

I would like to filter a ng-repeat function (I am not understand what that is mentioned, forgive me). 我想过滤一个ng-repeat函数(我不明白所提到的内容,请原谅我)。 Currently I want to make a filter but the filter function is based on the first letter of the option for example, in a set of array/string, I would like to filter that the first letter is "A" or "B" something like that. 目前,我想创建一个过滤器,但过滤器功能基于该选项的第一个字母,例如,在一组数组/字符串中,我想过滤第一个字母为“ A”或“ B”之类的东西那。

Here is the code for the HTML 这是HTML的代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js">
    </script>
    <title>Belajar Angular</title>
    <script type="text/javascript">
      var app = angular.module('tesapp', []);
      app.controller('tesCtrl', function($scope,$http){
        $scope.DapatkanItem = function(){
          $http.get('json/item.json').success(function(data){
            $scope.item = data;
          });
        };

        $scope.DapatkanItem();
      });
    </script>
  </head>
  <body ng-app="tesapp" ng-controller="tesCtrl">
    <h1>Mencoba Filtering</h1>
    <div class="col col-4">
      <label class="select">
        <select name="gender" ng-model="alfabet">
          <option value="0" selected disabled>Alphabet</option>
          <option value="1">A</option>
          <option value="2">B</option>
          <option value="3">C</option>
        </select>
      </label>
    </div>
    <div ng-switch="alfabet">
      <div ng-switch-default>
        <ul ng-repeat="tes in item.stores | orderBy: 'preparation' | orderBy: 'name'">
          <li ng-if="tes.preparation == ''">{{tes.name}} kosong</li>
          <li ng-if="tes.preparation == '1'">{{tes.name}} satu</li>
          <li ng-if="tes.preparation == '2'">{{tes.name}} dua</li>
          <li ng-if="tes.preparation == '3'">{{tes.name}} tiga</li>
        </ul>
      </div>
      <div ng-switch-when="1">
        <ul ng-repeat="tes in item.stores | orderBy: 'preparation'">
          <li>{{tes.name}}</li>
        </ul>
      </div>
    </div>

  </body>
</html>

What do you think? 你怎么看? For example I want to filter by the first letter of the array is "A", then I will pick the A in <select> tag and done, but in this case the problem is I don't know what function that I have to use to filter by the first letter. 例如,我要按数组的第一个字母“ A”进行过滤,然后在<select>标记中<select> A并完成,但是在这种情况下,问题是我不知道必须使用什么功能用于按首字母过滤。

I guess you can see this thread: how-to-use-regex-with-ng-repeat-in-angularjs I would change your select to 我猜你可以看到这个线程: 如何在ng-repeat-in-angularjs中使用正则表达式,我将选择范围更改为

<select name="gender" ng-model="alfabet">
  <option value="^">Alphabet</option>
  <option value="^(A|a)">A</option>
  <option value="^(B|b)">B</option>
  <option value="^(C|c)">C</option>
</select>

And then use a filter like the following 然后使用以下过滤器

ng-repeat="tes in item.stores | regex:'name':alfabet | orderBy: 'preparation' | orderBy: 'name'"

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM