Question

我使用Angular JS创建了一个ASP.NET MVC 4项目。我无法为这个代码示例创建一个JSFiddle。

我注意到我很好地检索了类别并打印得很好。然后，当我点击标记'<a>'所代表的某个类别时，我的代码会转到我的app.js的$scope.setActualItem，而ajax调用会检索正确的数据。但是我认为这些变化并未印刷。但是，我使用"<div ng-repeat="p in products">"从控制器获取数据。

你有解决方案吗？

谢谢

app.js：

var appli = angular.module("Demo", []);

appli.controller('CategoryCtrl', function ($scope, $http) {
   $http.get('/Category/GetCategories')
        .success(
            function (data) {
              console.log(data);
              $scope.categories = data;
            }
         );

   $scope.setActualItem = function (index) {
      $scope.currentItem = $scope.categories[index];

      var idCat = $scope.currentItem.id;
      console.log("passe ici");
      $http.get('/Category/GetProductsByCategory/'+idCat)
           .success(
                function (data) {
                   console.log(data);
                   $scope.products = data;
                }
            );
    };
});

我的观点：

<html ng-app="Demo">
  <head>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
    <script src="~/Scripts/app.js"></script>
  </head>

  <body ng-controller="CategoryCtrl">

     @Html.Partial("~/Views/Header/Index.cshtml")
     <div class="col-lg-3 col-md-3 col-sm-12">
        <div class="col-lg-12 col-md-12 col-sm-6">
          <div class="no-padding">
            <span class="title" style="padding-top: 20px;">CATEGORIES</span>
          </div>
          <a class ="list-group-item" ng-click="setActualItem($index)" ng-repeat="cat in categories">{{cat.name}}</a>
        </div>
     </div>
     <div id="ProductListcategory">
         ggfgfgfgfgf
         <div ng-repeat="p in products">
           <label>{{p.id}}</label>
           <label>{{p.name}}</label>
         </div>
     </div>

 </body>
</html>

Answer 1

使用angular.copy并在开始时定义$ scope.products

var appli = angular.module("Demo", []);

appli.controller('CategoryCtrl', function ($scope, $http) {

  $scope.products = [];
   $http.get('/Category/GetCategories')
        .success(
            function (data) {
              console.log(data);
              $scope.categories = data;
            }
         );

   $scope.setActualItem = function (index) {
      $scope.currentItem = $scope.categories[index];

      var idCat = $scope.currentItem.id;
      console.log("passe ici");
      $http.get('/Category/GetProductsByCategory/'+idCat)
           .success(
                function (data) {
                   console.log(data);


                   angular.copy(data,$scope.products);
                    //or angular.copy(data.data, $scope.products);
                }
            );
    };
});

Angular JS - 绑定视图和app.js - ng-repeat不起作用

1 个答案: