AngularJS中的位置变更和控制器管理

时间:2015-05-08 16:39:59

标签: javascript jquery html angularjs

我正在学习AngularJS。我不确定我的问题是否正确,因为我不懂技术语言。我的问题是两个页面之间的最后一个URL路径段(一个是列表页面,第二个是详细页面)。

这是列表页面网址.........#/modelList/

当我点击链接时,网址会更改为.........#/modelList/2(在网址中添加对应的行号 - 请参阅下面的html代码) - 我的问题在这里见最后一段

然后我可以从此值获取详细页面数据(请参阅控制器$routeParams$scope.carBrand = response.data[$scope.id]中的此行)

示例数组

data[
    { brand: 'nokia', model: 'modelOne'}
    { brand: 'nokia', model: 'modelTwo'}
    { brand: 'nokia', model: 'modelThree'}
]

HTML

<tr ng-repeat="list in phoneBrandList.data">
    <td><a href="#/modelList/{{$index}}">{{list.brand}} </a></td>
</tr>

详细信息页面的控制器

controller('carModelController', function($scope, $http, $routeParams){
    $scope.id = $routeParams.id
    alert($scope.id)
    $http.get("apidata.js")
      .success(function(response) {
        $scope.carBrand = response.data[$scope.id]
      })
})

一切都很好 -

现在我想在网址/nokia中添加最后一个字而不是数字/2,但我不会从$scope.carBrand = response.data[$scope.id]丢失相应的详细信息页面数据

问我的问题是否不清楚 谢谢你的帮助 -

2 个答案:

答案 0 :(得分:0)

好的,所以你可以试试这样的东西.. 在您的模板中

<tr ng-repeat="list in phoneBrandList.data" ng-init=getUrl($index)>
    <td><a href=url() ng-click="changeUrl()>{{list.brand}} </a></td>
</tr>

并在您的控制器中

controller('carModelController', function($scope, $http, $routeParams){
    $scope.id = $routeParams.id;
    $scope.url=undefined;
    $scope.getUrl=function(index){
       $scope.url="#/modelList/$index";
    }
     $scope.changeUrl = function(){
        $scope.url="#/modelList/nokia";
     }
    alert($scope.id)
    $http.get("apidata.js")
      .success(function(response) {
        $scope.carBrand = response.data[$scope.id]
      })
})

如果ng-click不起作用,因为它为href提供了更多优先级,如果是这种情况,则使用按钮。

答案 1 :(得分:0)

使用这种结构 - 我认为这是更好的主意

   <tr ng-repeat="list in phoneBrandList.data">
        <td><a href="#/modelList/{{$index}}/phonebrand">{{list.brand}} </a></td>
    </tr>

根据链接

更改路由提供商路径