无法绑定从控制器发送的数据以查看angular.js

Ahmad Elmoualem |

我的应用目前仅是一项服务的3个小部分,它们会http调用.json文件控制器,该控制器将从服务中获取数据并将其发送到视图。当我对服务中的数据进行硬编码时,它运行良好。

当我将硬编码数据替换为.json文件时,它停止工作,但是我将其记录在控制器中,并确保从.json文件中正确查询数据

这是简单的控制器:

(function (){
    'user strict';
    angular.module('myApp').controller('itemsCtrl',['$state','myappApi', itemsCtrl]);
    //constructor function
    function itemsCtrl($state, myappApi){
        var vm = this;

        myappApi.getItems(function(data){
            vm.items = data;
        });
        //vm.items = data;

        vm.selectItem = function(id){
            myappApi.setItemId(id);
            $state.go("app.item-detail");

        }
    };
})();

模板代码:

<ion-view ng-controller="itemsCtrl as vm">
    <ion-content class="has-header">
        <div class="list">
            <a class="item item-icon-right" ng-repeat="item in vm.items" ng-click="vm.selectItem(item.id)">
                <div class="row">
                    <div class="col item-thumbnail-left">
                        <img ng-src="vas-images/{{item.name}}.jpg">
                    </div>
                    <div class="col col-center">
                        <h3 class="blue-font">{{item.name}}</h3>
                        <p>{{item.desc}}</p>
                    </div>
                    <div class="col col-center">
                        <h4 class="blue-font-alt">Price:{{item.price}}$</h4>
                    </div>
                </div>
                <i class="icon ion-chevron-right icon-accessory"></i>
            </a>
        </div>
    </ion-content>
</ion-view>

服务代码:

(function (){
    'user strict';
    angular.module('myApp').factory('myappApi',['$http', myappApi]);

    function myappApi($http){

        //function to get all the items.
        function getItems(callback){
            $http.get("app/items/data.json")
            .success(function(data){
                callback(data);
            });
        }

        //function to set the item ID.
        function setItemId(itemId){
            currentItemId = itemId;
        }

        return{
            getItems: getItems,
            setItemId: setItemId
        };
    };
})();

.json文件:

{
    "items" : [
    {"id":1005, "name":"item-one", "desc":"some text here and there", "price":100},
    {"id":1006, "name":"item-two", "desc":"some text here and there", "price":500},
    {"id":1007, "name":"item-three", "desc":"some text here and there", "price":600},
    {"id":1008, "name":"item-four", "desc":"some text here and there", "price":50},
    {"id":1009, "name":"item-five", "desc":"some text here and there", "price":20},
    {"id":1010, "name":"item-six", "desc":"some text here and there", "price":660}
    ]
}
米科·维塔拉(Mikko Viitala)

也许您的数据有问题,因为以下内容在支持JSON文件时效果很好。

的HTML

<body ng-controller="itemsCtrl as vm">
  {{ vm.items | json }}
</body>

的JavaScript

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

myApp.controller('itemsCtrl', function(myappApi){
  var vm = this;
  myappApi.getItems(function(response){
    vm.items = response.data;
  });
});

myApp.factory('myappApi', function myappApi($http){
  return {
    getItems: function(callback){
      $http.get('data.json').then(callback).catch(callback);
    }  
  };
});

JSON格式

[{
  "name": "name",
  "desc": "desc",
  "price": 100
}]

相关的插件在这里http://plnkr.co/edit/NY2Un3

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

在Angular JS的控制器之间传递数据?

Angular.js-装饰控制器

C#MVC Post Model和其他数据从js发送到控制器

指令中的Angular.js bindToController:绑定到控制器的数据不能作为this.foo使用?

无法从显示控制器获取数据以查看laravel 5.6

Laravel Vue.js API:axios的PUT方法不会向控制器发送任何数据

angular js中的控制器之间的数据共享

如何从控制器呈现两种类型的数据以在node.js中查看?

在Laravel中,如何简单地将数据从js传递回控制器以查看?

将数据从控制器发送到js函数

从控制器获取ViewBag数据以进行查看

resolve的用途是什么,如何从弹出屏幕发送数据以在Angular JS中查看?

Angular JS从控制器中的工厂访问$ http数据

无法发送数据以响应Node.js中的视图

Angular js控制器多次注入

Angular JS无法识别控制器

如何在Angular JS的子控制器中访问父控制器数据

Express.js发送数据以查看未发送,出了什么问题

Angular JS部分控制器

如何将数据从Sails.js中的模型发送回控制器

带有控制器数据绑定的Angular JS指令调用

var从控制器通过app.js进行查看

控制器(ANGULAR JS)无法读取工厂嵌套的数据

实例化angular js控制器

Angular.js虽然控制器/工厂拥有数据,但查看空/未从$ scope提取数据

无法在Angular Js中声明控制器

如何将值发布到控制器以接收数据以查看 Angular 5+?

如何从控制器输出表数据以查看?

如何将数据从模型发送到控制器节点js