javascript - 如何在 Angular js 中添加具有动态输出的链接

标签 javascript jquery angularjs controller directive

我的页面显示类别,我正在从我的 api 请求加载类别 单击第一个类别时,我需要加载其他一些页面(例如产品),并且需要从其他一些 api 加载产品。 当我用简单的 href 链接它时,它会显示

{{ 产品.产品名称 }}

我的 Controller 页面:

    var app = angular.module('myApp', []);
app.controller('CategoryController', function($scope, $http) {
    $http.get("http://192.168.1.112/estore/api/get-categories")
    .success(function(response) {$scope.categories = response.categories;});
});
app.controller('ProductController', function($scope, $http) {
    $scope.id = 2; 
    $http.get("http://192.168.1.112/estore/api/get-products?id=id")
    .success(function(response) {$scope.products = response.categories;});
});

我的索引页:

<body ng-app="myApp">
        <div role="main" class="ui-content" ng-controller="CategoryController">
            <ul class="cat" ng-repeat="x in categories">
            <li>
                <a href="list.html/{{x.id }}"> {{ x.name }} </a>
            </li>
            </ul>  
        </div>
        </body>

我的列表页:

<body ng-app="myApp">
        <div role="main" class="ui-content" ng-controller="ProductController">
            <ul class="cat" ng-repeat="pdts in products">
            <li>
                {{ pdts.productname }}
            </li>
            </ul>  
        </div>
        </body> 

最佳答案

有两个选项:-

1) you can use $state.go() and pass id parameters to products state.

2) you can use $cookiestore and set the id in the cookie and later retrieve in the products state.



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

   app.config(['$stateProvider',function($stateProvider){
        $stateProvider.state('products',{
           url: '/products/:ID',
           title: 'productlist',
           templateUrl: 'app/views/product/productlist.html',
           controller:'productlistController'
        })
   }]);



app.controller('CategoryController', function($scope, $http ,$state) {

        $http.get("http://192.168.1.112/estore/api/get-categories")
        .success(function(response){
            $scope.categories = response.categories;
        });

        $scope.redirectTo = function(id){
           $state.go('products', {ID : id});
        };

   });



app.controller('ProductController', function($scope, $http , $state) {
        var id = $state.params.ID;
        $http.get("http://192.168.1.112/estore/api/get-products?id="+id)
        .success(function(response) {
            $scope.products = response.products;
        });
   });

索引页

<body ng-app="myApp">
<div role="main" class="ui-content" ng-controller="CategoryController">
     <ul class="cat" ng-repeat="x in categories">
     <li>
          <a ng-click="redirectTo(x.id)"> {{ x.name }} </a>
     </li>
     </ul>  
</div>
</body>

关于javascript - 如何在 Angular js 中添加具有动态输出的链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32712147/

相关文章:

javascript - Angular 和 D3.js : Why is element[0] undefined?

javascript - setSelectionRange 不是函数

javascript - react ;映射数组后没有任何渲染

javascript - 在 JSFiddle 中链接外部 JSON 数据文件

javascript - JQuery 删除/添加 Infopath webpart 的 ID 类

javascript - 在函数内部使用变量作为参数

javascript - 如何使用AngularJS使这两部分重复?

java - 在spring Controller 中上传带有其他参数的文件

javascript - Firefox - 无法安装该附加组件,因为它似乎已损坏

javascript - 如何在元素上设置默认 focus()