AngularJS表闪烁

AngularJS表闪烁,angularjs,twitter-bootstrap,Angularjs,Twitter Bootstrap,我有一个简单的AngularJS应用程序,在用户登录后显示一个包含ng重复数据的表。我遇到了一个问题,在登录后,表中会简要显示空白行,然后显示包含数据的实际行。有没有关于如何解决这个问题的建议 这是用于登录的控制器: $scope.login = function(user) { loginSrvc.login(user).then(function(response) { if (response == "authentication failed") {

我有一个简单的AngularJS应用程序,在用户登录后显示一个包含ng重复数据的表。我遇到了一个问题,在登录后,表中会简要显示空白行,然后显示包含数据的实际行。有没有关于如何解决这个问题的建议

这是用于登录的控制器:

  $scope.login = function(user) {
    loginSrvc.login(user).then(function(response) {
      if (response == "authentication failed") {
        $scope.error = true;
        $scope.user = {};
         $location.path("/");
      } else {
        if (response.group_name == "On Site Registration"){
             var data = {
               event: response.zk_event_id,
               group: response.zk_group_id
             };
             $scope.getAvailableCamper(data);

        }
        else if (!response.zk_group_id) {
                   $location.path("/form/" + response.zkp_camper_id);
             }
             else {
             $location.path("/dashboard/" + response.zk_event_id + "/" + response.zk_group_id);
             }
      }

    })
  }


$scope.getAvailableCamper = function(data) {
    dashboardSrvc.fetchGroup(data).then(function(response){
         var findAvailableCamper = _.find(response.data, {status: null});
         console.log("this is find", findAvailableCamper);
         var id = findAvailableCamper.zkp_camper_id;
        $location.path("/onSiteForm/" + id);

    })
  }
这是表的控制器:

$scope.campers = function() {
    $scope.camper = loginSrvc.getCampers();
  }

  $scope.campers();

  $scope.fetchCampers = function(id) {
    dashboardSrvc.fetchCampers(id).then(function(response){
        $location.path("/form/" + id);
    })
  }
以下是表格的html代码:

<tr ng-repeat="campers in camper">
            <td>{{$index + 1}}</td>
            <td>{{campers.name_first}}</td>
            <td>{{campers.name_last}}</td>
            <td><button type="submit" name="submit" ng-click="register(campers)" class="btn btn-success" role="button" ng-hide="campers.status == 'Submitted' "  ng-disabled="!(!!campers.name_first && !!campers.name_last && !!campers.gender && !!campers.city && !!campers.date_of_birth && !!campers.email && !!campers.emergency_cell_phone && !!campers.emergency_contact_first_name && !!campers.emergency_contact_last_name && !!campers.emergency_home_phone && !!campers.relationship_to_camper && !!campers.first_time_flag )">Submit</button> <p ng-show ="campers.status == 'Submitted'" > {{campers.registration_date | date: 'medium'}}

            </p>
            </td>
            <td>{{campers.status}}</td>
            <td>
              <button ng-click="fetchCampers(campers.zkp_camper_id)"  type="submit" name="view" class="btn btn-default" role="button" ng-show="campers.status == 'Submitted' "><span class="glyphicon glyphicon-eye-open"></span></button>
              <button ng-click="fetchCampers(campers.zkp_camper_id)" type="submit" name="edit" class="btn btn-default" role="button" ng-hide="campers.status == 'Submitted' " ><span class="glyphicon glyphicon-edit"></span></button>

  <button type="button" ng-click="setValue(campers.zkp_camper_id)" name="deleteModalLauncher" id="deleteModalLauncher" class="btn btn-danger" role="button" data-toggle="modal" data-target="#deleteModal" ng-hide="campers.status == 'Submitted' " ><span class="glyphicon glyphicon-trash" aria-hidden="true"></span></button>

            </td>
          </tr>

{{$index+1}}
{{campers.name_first}
{{campers.name_last}
提交

{{campers.registration|date | date:'medium'}

{{campers.status}

我真的很感谢你的帮助!谢谢

有一个指令可以最小化角度循环在检查绑定和所有内容时的闪烁。它被称为ng斗篷,可以添加到视图中的任何元素

更多信息:


您还可以使用angularjs事件,该事件在内容完全加载时触发,并设置一个标志ex.load=true,然后使用ng show with loaded变量

控制器:

$scope.$on('$viewContentLoaded', function(){
   $scope.loaded = true;
});
视图:

<table ng-show="loaded">
  .....
 </table>

.....

希望有帮助

有一个指令可以最小化角度循环在检查绑定和所有内容时的闪烁。它被称为ng斗篷,可以添加到视图中的任何元素

更多信息:


您还可以使用angularjs事件,该事件在内容完全加载时触发,并设置一个标志ex.load=true,然后使用ng show with loaded变量

控制器:

$scope.$on('$viewContentLoaded', function(){
   $scope.loaded = true;
});
视图:

<table ng-show="loaded">
  .....
 </table>

.....

希望有帮助

使用类似于
ng show=“finishedload”
的方法,并设置
$scope.finishedload=true在最后一个异步语句的
中,然后
谢谢,我尝试了这个,但它仍然显示闪烁。您可以尝试用
ng bind
替换所有插值
{}
。如果这种情况仍然发生,我猜是因为加载数据后路线发生了变化在最后一个异步语句的
中,然后
谢谢,我尝试了这个,但它仍然显示闪烁。您可以尝试用
ng bind
替换所有插值
{}
。如果这种情况仍然发生,我猜这是因为加载数据后路由发生了变化。我尝试了ng show和ng斗篷,闪烁仍然存在。我尝试了ng show和ng斗篷,闪烁仍然存在。