显示/隐藏搜索Div angular UI

时间:2015-06-05 15:28:40

标签: javascript jquery html css angularjs

我正在使用角度UI按钮让用户在用户选择按钮时选择搜索条件患者或id它将显示searchByText div如果选择日期它将隐藏searchByText并显示SearchBydateRange。我的问题是我的角度秀和隐藏不起作用。我用这个codepen作为例子 http://codepen.io/SusanneLundblad/pen/iBhoJ

<div class="panel-body">
        <form role="form">
            <div class="col-md-7">
                <div id="searchByText" class="form-group form-group-search" ng-hide=" searchOption == 'date'">
                    <label class="sr-only" for="search">Enter Search</label>
                    <input type="text" class="form-control" id="search" placeholder="Enter {{searchOption}} ..." data-ng-model="searchText">
                </div>
                <div id="SearchBydateRange" class="form-group form-group-search col-md-4" data-ng-show=" searchOption  == 'date' ">
                    <label class=" sr-only" for="search">
                        Enter Search
                    </label>
                    <input type="text" class="form-control col-md-2" id="search" placeholder="From Date" data-ng-model="fromDate">
                    <input type="text" class="form-control col-md-2" id="search" placeholder="To Date" data-ng-model="toDate">
                </div>
            </div>
            <div class="col-md-4 text-center">
                <div class="btn-group btn-group-sm" data-ng-hide="userIsManager">

                    <label class="btn btn-searchsel" ng-model="searchOption" btn-radio="'patient'">Patient</label>
                    <label class="btn btn-searchsel" ng-model="searchOption" btn-radio="'id'">ID</label>
                    <label class="btn btn-searchsel" ng-model="searchOption" btn-radio="'Date'" va>Date</label>
                </div>
            </div>
            <div class="col-md-1">
                <button type="submit" class="btn btn-sm btn-info btn-search full-width" data-ng-click="doSearch()">Search</button>
            </div>
        </form>
    </div>

1 个答案:

答案 0 :(得分:0)

将按钮部分更改为:(标签或收音机无关紧要,但重要的部分是ng-click)

BEGIN { srand(0) }
$a1 = $Array[rand(@Array)];
push (@a2, $a1);

然后为你的搜索div:

<div class="col-md-4 text-center">
            <div class="btn-group btn-group-sm" data-ng-hide="userIsManager">
                <input type="radio" ng-model="searchOption" value="patient" ng-click="searchOption = 'patient'">Patient</label>
                <input type="radio" ng-model="searchOption" value="id" ng-click="searchOption = 'id'">ID</label>
                <input type="radio" ng-model="searchOption" value="Date" ng-click="searchOption = 'date'">Date</label>
            </div>
        </div>