Question

我想制作一个可扩展的搜索栏，如下面的链接：

http://tympanus.net/codrops/2013/06/26/expanding-search-bar-deconstructed/

我正在尝试使用三个指令：

纳克对焦=＆＃34;真＆＃34; NG-模糊=＆＃34;假＆＃34;

和绑定这些标志的ng-class

到目前为止，我已经完成了它但显然他们没有工作

＆＃13;

    
    .myBlur {
    border-radius: 5px;
    border: 1px solid #ccc;
    padding: 5px;
    width: 75px;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    transition: all .5s ease;
    float: right;
}
.myFocus:focus {
    width: 200px;
}

＆＃13;

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <form class="form-horizontal">
      <div class="form-input-group">
        <input type="search" ng-class="{ myFocus: true, myBlur: false }" ng-focus="true" ng-blur="false" placeholder="search"/>
        <button type="button" class="btn btn-default" >
          <i class="glyphicon glyphicon-search"></i>
        </button>
      </div>
    </form>

＆＃13;

任何修改？我仍然需要使用这三个指令。

Answer 1

试试这个。

jQuery
$( ".btn" ).click(function() {
  $( ".form-horizontal" ).toggleClass( "open" );
});

CSS

.form-horizontal input {
    width: 0px;
    margin-right: -20px;
}
.form-horizontal.open input {
    width:150px;
    margin-right: 0;
}

http://jsfiddle.net/gmkhussain/8ea4zLfk/

ANGULARJS可扩展搜索栏

1 个答案: