Improving AngularJS view update with ngshow
Question
Right now I have a view that uses ng-show to show a select DOM object when certain criteria are met and ng-show for a input DOM for all other cases. When I do this and switch between the two cases, input box takes longer to disappear than when the select appears. The delay is pretty noticeable so I want to improve it so that there's very little delay between the two DOM changes.
Is there any way to do this?
<div>
<input ng-show="field && (type == 'search' || fieldBucket[field].moreBuckets)"
type="text" ng-model="value">
<select class="facet-value"
ng-show="field && type == 'filter' && !fieldBucket[field].moreBuckets"
ng-model="value"
ng-options="fieldBucket[field].buckets">
</select>
</div>
1 answers
solution1
0 2015-08-27 19:50:38
I don't think it is anyway related to ng-show or hide it might depend on some data which you are expecting from server as response. I have created a simple demo for you that in basic ng-show/hide there isn't any leg if their value is set at same time.
<!doctype html>
<html ng-app>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
<div class="wrapper" ng-app="test">
<div class="phone" ng-controller="TestCtrl" ng-init="type = 'search'">
<a href="" ng-click="type = 'search'"> search</a>
<a href="" ng-click="type = 'filter'"> filter</a>
<div >
<input ng-show="type == 'search'"
type="text" ng-model="value">
<select class="facet-value"
ng-show="type == 'filter'"
ng-model="value"
ng-options="obj.name for obj in list">
</select>
</div>
</div>
</body>
<script type="text/javascript">
var app = angular.module('test', []);
function TestCtrl($scope) {
$scope.list = [{name : 'one'}, {name : 'two'}];
}
</script>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.