NG-Click not working in Chrome but works in FireFo

2019-09-21 08:15发布

站内问答 / JavaScript
1560 1 6

I have a NG-Click to change the amount of elements on the page (that are coming from an API call). The NG-Click utilizes a drop down box that works in FireFox. But I recently discovered that it isn't working in Chrome when a co-worker started working on the service. I have no idea as to why it wouldn't work and any help is appreciated. I've attached a JSFidle with the code.

http://jsfiddle.net/pAy3B/

JavaScript:

app.controller("AppCtrl", function($http, $scope){
var app = this; 
$scope.toLoad=50;
$scope.page= 0;
$scope.sortArray = [];
$scope.filterList = "";

function getData(page){
    $http.get('/file/filter/' + $scope.toLoad + '/' + $scope.page + '?' + $scope.filterList ).success(function(data){
        app.info = data;
        console.log(data);
    });
}

$scope.changeLoad = function(toLoad){
    $scope.toLoad = toLoad;
    getData($scope.page)
}
}

HTML:

<body ng-app="app" ng-controller="AppCtrl as app" id="body">
<div id="main-table">

                <div class="widget-body no-padding">
                    <div id="select-more">
                        <select class="form-control" name="dt_basic_length" aria-controls="dt_basic" id="box-test" style="width:6%">
                            <option value="10" ng-click="changeLoad(10)"> 10 </option>
                            <option value="25" ng-click="changeLoad(25)"> 25 </option>
                            <option value="50" ng-click="changeLoad(50)"> 50 </option>
                            <option value="100" ng-click="changeLoad(100)"> 100 </option>
                            <option value="1000" ng-click="changeLoad(1000)"> 1000 </option>
                        </select>
                    </div>
                <table>
                    <tbody>
                            <tr ng-repeat="information in app.info | filter:searchText">
                                <td>{{information.uuid}}</td>
                                <td>{{information.publisher}}</td>
                                <td>{{information.ts}}</td>
                            </tr>
                        </tbody>
                    </table>
        </div>
  </div>

1条回答
贪生不怕死
2楼-- · 2019-09-21 08:46

You should use ng-change please see here

<body ng-app="app" ng-controller="AppCtrl" id="body">
<div id="main-table"> 

    <div class="widget-body no-padding">
        <div id="select-more">
            <select class="form-control" name="dt_basic_length" aria-controls="dt_basic" id="box-test" style="width:6%" ng-change="update()" ng-model="selectedItem">
                <option value="10">10</option>
                <option value="25">25</option>
                <option value="50">50</option>
                <option value="100">100</option>
                <option value="1000">1000</option>
            </select>
        </div>
        <table>
            <tbody>
                <tr ng-repeat="information in app.info | filter:searchText">
                    <td>{{information.uuid}}</td>
                    <td>{{information.publisher}}</td>
                    <td>{{information.ts}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

js:

var app = angular.module('app', []);

app.controller("AppCtrl", function ($http, $scope) {
    var app = this;
    $scope.toLoad = 50;
    $scope.page = 0;
    $scope.sortArray = [];
    $scope.filterList = "";

    $scope.selectedItem = {};

    function getData(page) {
        $http.get('/file/filter/' + $scope.toLoad + '/' + $scope.page + '?' + $scope.filterList).success(function (data) {
            app.info = data;
            console.log(data);
        });
    }

    $scope.changeLoad = function (toLoad) {
        $scope.toLoad = toLoad;
        getData($scope.page);
    };

    $scope.update = function () {
      alert($scope.selectedItem);
    };
});
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)