Question

我对AngularJs很新。我正在尝试学习它。我遇到了问题，但无法弄清楚错误是什么。

我正在将AngularJs与SpringMVC集成。我的问题是数据来自Spring控制器，但是当我将数据分配给角度控制器中定义的数组时。它不会复制到它。

这是我的Angular控制器

App.controller('productController',['$scope','productService', function($scope,productService){
var self=this;
var category={catId:null,catName:''};
self.categories=[];

self.categoriesForPrdouct= function(){
    productService.getCategories().then(
        function(commingData){
            self.categories=commingData;
            console.log(self.categories); //This line Prints Data 
        }, function (errResponse) {
            console.error('Error while fetching Categories');
        }
    );
};

 console.log(self.categories); // **This line do not prints the data.** 

self.categoriesForPrdouct();


self.reset = function(){
    category={catId:null,catName:''};
    $scope.myForm.$setPristine(); //reset Form
};

}]);

第一个控制台打印数据但第二个控制台不打印。

，其次是我想在下拉列表中显示数据，我就像这样写了

<select id="itemCategory" ng-model="productCtrl.category.catName" ng-option="productCtrl.category.catName for category in categories">
</select>

这是对还是错。我很困惑。

Answer 1

此处的问题是，当您console.log在服务电话之外时，它将不会打印任何内容，因为Angular中的服务调用是asynchronous.

因此，几秒钟之后将调用then()函数内的任何内容，并填充array object。所以不必担心!!

在视图中

你明显误用了ng-options。这不是ng-option

Answer 2

或者您可以做一件事，您可以编写{{categories}}来打印html中的数据，以便您可以在html页面中跟踪此变量。和角度js选择你可以修改你应用ng-repeat

的代码

<select> <option ng-repeat="data in categories" value="data.catName"> {{data.catName}} </option> </select>

尝试这可能会有所帮助

Answer 3

我认为您希望下拉菜单在程序启动时具有正确的类别，对吧？你去了你的网络应用程序，数据就在那里，对吗？

好吧，这里有几点需要注意。首先是：

console.log(self.categories); // there is no data here yet 

self.categoriesForPrdouct(); //here you are filling self.categories

函数categoriesForPrdouct应该填充数组self.categories。即使categoriesForPrdouct是同步函数，也不能向变量请求数据，只能在下一行填充变量。

然而再次，categoriesForPrdouct是一个异步函数。这意味着当您的请求准备就绪时，将执行回调函数。

self.categoriesForPrdouct= function(){
    productService.getCategories().then(
        function(commingData){

           //so right here, this is the callback. You need to think of
           //think of this as code executed with a delay. This gets
           // executed when productService.getCategories() has finished 
           // doing what it is supposed to do. 

            self.categories=commingData;
            console.log(self.categories); //This line Prints Data 
        }, function (errResponse) {
            console.error('Error while fetching Categories');
        }
    );
};

此外，如果您希望在应用程序启动时准备好数据，则应使用ng-init指令，如下所示：

<body ng-app="yourApp" ng-controller="productController as self" ng-init='self.categoriesForProduct()'>

Angular将立即运行，填满你的self.categories变量。

我有一个类似代码here的plunker。看看它，它可能会有所帮助

Answer 4

为什么没有选择？

见：

arm

为什么要添加＆＃34; productCtrl＆＃34; ？

改为使用它......

<select id="itemCategory" ng-model="productCtrl.category.catName" ng-option="productCtrl.category.catName for category in categories">
</select>

至于为什么console.log没有显示，请参考其他成员的答案......

更新：您假设它的格式为category = {catId：null，catName：＆＃39;＆＃39;}，而category的值为

<select id="itemCategory" ng-model="productCtrl.category.catName" ng-option="category.catName for category in categories">
</select>

您可以将其更改为{catId：null，catName：＆＃39;＆＃39;}格式或按原样使用。

["Apple","Black Berry","GFive","Samsung"]

Answer 5

也许这对你有用：

self.categoriesForProduct= function(){
    productService.getCategories().then(function(result){
            self.categories = result.data;
            console.log(self.categories); //This line Prints Data 
        }, function (errResponse) {
            console.error('Error while fetching Categories');
        }
    );
};

数据未加载到AngularJs中的数组

5 个答案: