javascript - AngularJS ng-init 不与 ng-repeat 一起使用

标签 javascript angularjs

我一直在尝试调用passID()页面初始化时函数,但该函数仍然不起作用。

网站的运作方式如下: Page-A 将数据传递到Controller-A 然后到服务,然后到 Controller -B,然后 Controller -B的函数被页面B调用。

我的猜测是我的错误出现在 Page-B 中,因为我已成功地将 Page-A 的数据传递到 Controller-B,但我不能 100% 确定。

在我的Page-A中,我制作了一个按钮,使用ng-Click调用Controller-A的功能

<a href="#/compare-details"><button class="viewDetails" ng-click="passID([1,03,07])">test button</button></a>

Controller A 仅从页面 A 获取数据

angular.module('handsetExplorerModule')
.controller("compareHandsetController", ['$scope','compareHandsetService','sharedData', function($scope, compareHandsetService, sharedData) {


    $scope.passID = function(id){
        var arrayID = [];
        arrayID = id;
        sharedData.set(arrayID);
    };

}]);

Service 获取我的 JSON,并且是我的 getter 和 setter

angular.module('handsetExplorerModule')
.factory('compareDetailsService', ['$http','$q', function($http, $q) {
  return {
    getHandsetList: function(){
      return $http.get("./data/compareJSON.json");
    }
  };
}]);


angular.module('handsetExplorerModule')
.factory('sharedData', function() {
 var savedData = {}
 function set(data) {
   savedData = data;
 }
 function get() {
  return savedData;
 }

 return {
  set: set,
  get: get
 }

});

Controller-B 过滤 JSON 文件以仅获取我需要的内容(我使用 Page-A 中的 ID 进行过滤)

angular.module('handsetExplorerModule')
.controller("compareDetailsController", ['$scope','compareDetailsService','sharedData', function($scope, compareDetailsService, sharedData) {

     $scope.data = {phones: []};
  compareDetailsService.getHandsetList()
   .then(
       function(data){
         $scope.data.phones = data.data;
       }, 
       function(error){
           //todo: handle error
       }
    );

    var getData = sharedData.get();

    $scope.passID = function passID(){
            var newData = [];
            for(var i=0; i<$scope.data.phones.length; i++){
                if($scope.data.phones[i].id == getData[0] || $scope.data.phones[i].id == getData[01] || $scope.data.phones[i].id == getData[02]){
                    newData.push($scope.data.phones[i]);
                }   
            }
            $scope.phoneContent = newData;

        } 

   $scope.viewDetails = function(id){
        alert(id);
    } 

}]);

最后,在我的Page-B中,我调用了Controller-B函数:<div ng-init="passID()">

由我的Page-B的 ng-repeat 使用:

<table id="Content"  ng-repeat="x in phoneContent track by x.id">
            <tr>
                <td class="one">
                    <table>
                    <tr>
                        <td><img class="contImage" ng-src="{{x.image}}" ng-alt="{{x.name}}" /></td>
                        <td class="textAlign">{{x.name}} <button class="viewDetails" ng-click="viewDetails(x.id)">VIEW DETAILS</button></td>
                    </table>
                </td>       
                <td class="two">{{x.size}}</td>
                <td class="one">{{x.storage}}</td>
                <td class="two">{{x.camera}}</td>
                <td class="one">{{x.battery}}</td>
                <td class="two">{{x.network}}</td>
                <td class="one">{{x.sim}}</td>
            </tr>
            </table>

最佳答案

我不知道你为什么定义arrayID。 要解决您的问题,请尝试使用 sharedData.set = arrayID; 而不是 sharedData.set(arrayID);

希望对你有帮助!

关于javascript - AngularJS ng-init 不与 ng-repeat 一起使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40018695/

相关文章:

javascript - 防止ajax返回失败,频繁请求?

javascript - Angular JS - 该程序根本没有运行

angularjs - $watch 仅在没有 watchExpression 的情况下工作

javascript - 使用对象值打开 bootstrap $modal 的通用功能

javascript - jquery mouseup 确保只触发一次

javascript - 如何获取元素相对于浏览器视口(viewport)的顶部位置?

javascript - 为什么这个 Canvas 动画在使用 ngRoute 第二次加载时挂起?

javascript - 修改url中的参数(带变量)

javascript - ng-submit 在 Laravel PHP 框架中不起作用

javascript - 如果与 GeoJSON 层一起使用, map 标签的 zIndex 无效