Question

我是AngularJS的新手。我正在使用带有角度的select2组件。当我从列表中选择列表项目然后页面进入顶部位置然后我再次向下滚动。请帮我解决这个问题。

<html>
<body>
.....
....
....
....  //scrolled down and selected the item 
<table style="width:100%">
<tr ng-repeat="inneritem in workflow" >
    <td >         
     <input type="text" ui-select2="selectuiOptions"     
     ng-model="process_added" ng-click="selectProcessChange()">
   </td>        
</tr>
</table>
</body>
</html>

Angular js代码：

$scope.selectuiOptions =
 {
  data:$scope.processes,    
  formatResult : processList1,
  formatSelection : processList1,   
};  

function processList1(processElement) {
return "<img class='flag' src='../images/p.png'/>
 <div class='h5' style='display:inline-block;padding-left:15px'>"+processElement.name + "</div>
 <div style='padding-left:30px' class='h5'>
 <span class='icon-code-updated icon-doc-missing' style='display:inline-block'></span>"
 + processElement.status+"</div>";
        }

$scope.workflow[];
$scope.selectProcessChange =function(selected_Process){     
            $scope.workflow.push(selected_Process); 
};

Answer 1

我得到了答案。看了这之后我很惊讶它是如何发生的，只是我改变了

的select2.css文件

以前

.select2-container {
    margin: 0;
    position: absolute;
    display: inline-block;
    /* inline-block for ie7 */
    zoom: 1;
    *display: inline;
    vertical-align: middle;
}

更改后

：

.select2-container {
    margin: 0;
    position: relative;
    display: inline-block;
    /* inline-block for ie7 */
    zoom: 1;
    *display: inline;
    vertical-align: middle;
}

它正常工作..谢谢大家

Answer 2

试

angular.module('module').value('$anchorScroll', angular.noop);

它帮助了我

Answer 3

我将建议你可以尝试两件事，但没有一个傻瓜或者傻瓜，这真的只是猜测。但是，我不知道会导致滚动的任何其他内容。

1）关闭自动滚动

module.config
(
    [
        '$anchorScrollProvider',
        function(asp)
        {
            asp.disableAutoScrolling();
        }
    ]
)

2）关闭自动路由重新加载

$routeProvider.when
(
    '/yourRoute',
    {
        reloadOnSearch: false
    }
);

单击列表项时阻止页面进入顶部

3 个答案:

1）关闭自动滚动

2）关闭自动路由重新加载