在angularjs中搜索框

Question

] 1

我想在角度js中创建这种搜索框。怎么做。普通文本框我知道如何创建，但如何使用此搜索图标创建。请回复。 感谢

Answer 1

简单的html，在Div中包含此图标的<input>和<img>。

<div>
    <input id="searchInput" ng-model="searchText"></input>
    <img src="https://image.freepik.com/free-icon/zoom-or-search-tool_318-34054.png"/>
</div>

并使用此输入值过滤ng-repeat。

<div ng-repeat="product in products | filter:searchText">

Answer 2

在这里使用CSS，您需要使用 font-awesome 作为搜索图标

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css

您还可以阅读有关ng-repeat here

的更多信息

查看jsfiddle

＆＃13;

＆＃13;

* {
  box-sizing: border-box;
}

html,
body {
  font-size: 12px;
}

input {
  border: 1px solid #ccc;
  font-size: 12px;
  height: 30px;
  padding: 4px 8px;
  position: absolute;
  width: 50%;
}
input:focus {
  outline: none;
}

button {
  text-align: center;
}
button:focus {
  outline: none;
}
button.btn-search, button.btn-reset {
  background: #568683;
  border: none;
  height: 30px;
  font-size: 12px;
  padding: 4px;
  position: absolute;
  width: 30px;
}

.sample {
  float: left;
  height: 50px;
  margin: 0 8%;
  position: relative;
  width: 34%;
}
.sample.ten input {
  border-radius: 15px;
  transition: all .6s ease-in-out .3s;
  width: 120px;
}
.sample.ten input:focus {
  transition-delay: 0;
  width: 200px;
}
.sample.ten input:focus ~ button {
  transform: rotateZ(360deg);
}
.sample.ten input:focus ~ button.btn-search {
  background: #568683;
  color: #fff;
  left: 172px;
  transition-delay: 0;
}
.sample.ten input:focus ~ button.btn-reset {
  left: 202px;
  transition-delay: .3s;
}
.sample.ten button {
  transition: all .6s ease-in-out;
}
.sample.ten button.btn-search {
  background: #ccc;
  border-radius: 50%;
  height: 26px;
  left: 92px;
  top: 2px;
  transition-delay: .3s;
  width: 26px;
}
.sample.ten button.btn-reset {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 50%;
  font-size: 10px;
  height: 20px;
  left: 92px;
  line-height: 20px;
  padding: 0;
  top: 5px;
  width: 20px;
  z-index: -1;
}

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
angular.module('sample', [])
  .controller('sampleController', ['$scope', function($scope) {
    $scope.users = [
    	{
      	firstname: 'John'
      },
      {
      	firstname: 'Jack'
      }];
  }]);
</script>
<div ng-app="sample" >
  <div class="sample ten">
    <input type="text" name="search" ng-model="search.$" placeholder="search">
    <button type="submit" class="btn btn-search">
      <i class="fa fa-search"></i>
    </button>
    <button type="reset" class="btn btn-reset fa fa-times"></button>
  </div>
  <br>
  <table ng-controller="sampleController">
    <thead>
      <tr>
        <th>Users</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="user in users | filter:search">
        <td>{{user.firstname}}</td>
      </tr>
    </tbody>
  </table>
</div>

＆＃13;

＆＃13;

＆＃13;