ng-click:在angularjs页面之间传递数据selectedItem

ng-click : pass data selectedItem between pages angularjs

本文关键字:数据 selectedItem 之间 angularjs ng-click      更新时间:2023-12-30

因此,我可以选择列表中的项目,但目的是在点击时将所选列表的数据传递到另一个/路由中。我需要一些帮助,因为我真的不知道如何继续。如果你知道朋克的例子,请毫不犹豫地告诉我:)

波纹管是我的选择建议控制器

app.controller('optionSuggestionController', ['$scope', '$http', function($scope, $http) {
  $http.get('suggestions.json')
       .then(function(res){
          $scope.suggestions = res.data;                
        });
    $scope.setMaster = function(suggestion) {
        $scope.selected = suggestion;
    }
    $scope.isSelected = function(suggestion) {
        return $scope.selected === suggestion;
    }
}])

Bellow是我的数据列表

<ul class="list-holder">
    <li ng-repeat="suggestion in suggestions" ng-class="{active : isSelected(suggestion)}">
        <a ng-click="setMaster(suggestion)">{{suggestion.fromto}}</a>
    </li>
</ul>

Bellow是我的建议。json

[{ "fromto": "Dublin to London", "img": "http://placekitten.com/100/100" },
    { "fromto": "Dublin to Paris", "img": "http://placekitten.com/100/100" },
    { "fromto": "Dublin to Mexico", "img": "http://placekitten.com/100/100" }]

我认为您可以使用提供程序'$rootScope'。

$rootScope.selected = suggestion;

您可以在其他控制器中访问此数据。

希望能有所帮助。

我有两个建议:

  • 您可以使用提供程序"$rootScope"。

    $rootScope.selected=建议;

  • 或者通过提供程序"$route"通过url获取参数。

    var建议=$route.current.params.suggestion;

您可以使用Service或Factory在控制器之间共享数据,我用您的代码创建一个Factory,并在控件上调用它来使用。

    app.controller('optionSuggestionController', function ($scope, $filter, $timeout, $timeout, $http, testFactory) {
            testFactory.get(function (resp) {
                console.log(resp);
                $scope.suggestions = resp;
            });
    });

    app.factory('testFactory', function ($http) {
        var databaseFactory = {};
        databaseFactory.get = function (callback) {
            return $http.get('suggestions.json').then(function (response) {
                databaseFactory.returnedData = response.data;
                callback(databaseFactory.returnedData);
            });
        }
        return databaseFactory;
    });