gpt4 book ai didi

angularjs - Angular 路由/路径更改和范围问题

转载 作者:行者123 更新时间:2023-12-02 03:28:27 25 4
gpt4 key购买 nike

我是 AngularJS 的新手,我面临着这些问题:

  1. 我想要一个项目(电影)列表,当我单击图像或标题时,我希望路径类似于 #/movie/id。为此,我尝试使用 ngRoute 并尝试了路径,但我都遇到了错误,你能指导我哪一个适合我的情况以及我该如何使用它吗?

  2. 正如您在 HTML 代码中看到的那样,我正在尝试绘制一个搜索框,但现在当 API 运行并返回数据时,ng-app 的全部内容将被电影列表替换,应该我只为我想要更改的内容创建了一个新范围,如果是的话,如何以及在何处?

这是我的代码:

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

movies.controller('movieController', function ($scope, $http) {

$http.jsonp('http://api.rottentomatoes.com/api/public/v1.0/lists/movies/box_office.json', {
params: {
limit : 16,
country : 'us',
apikey: 'rssd8z7pfw5t4nyd3cpszzzm',
callback: 'JSON_CALLBACK'
}
})
.success(function (data) {
$scope.movies = data.movies;
});

});


//added ngroute
var app = angular.module('movies', ['ngRoute']);
app.config(
function($routeProvider) {
$routeProvider.
when('/', {templateUrl:'/'}).
when('/movie/:id',
{
controller:UserView,
templateUrl: function(params){ return '/moviessssssss/' + params.id; }
}
).
otherwise({redirectTo:'/'});
}
);
app.controller('UserView', function($scope) {
$scope.movies = 'hereeeeeee!';
});
<html ng-app="movies">

<head>
<link rel="stylesheet" hrf="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script>
</head>

<body>
<div class="ng-scope">
Search : <input type="text" placeholder="filter for..." >
</div>
<div ng-view>
{{ message }}
<table ng-controller="movieController" class="ng-cloak">
<tr ng-repeat="movie in movies">
<td><a ng-href="#movie" ><img ng-src="{{ movie.posters.thumbnail}}"/></a></td>
<td><a ng-href="#movie" > {{ movie.title }} </a></td>
</tr>
</table>
</div>

最佳答案

获取链接:

ng-href="{{'/#/movie/'+movie.id}}"

然后为了让过滤器工作,

将 ng-model 放入您的搜索框。在你的 ng-repeat 中添加 |过滤器:ng-modelname

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

movies.controller('movieController', function ($scope, $http) {

$http.jsonp('http://api.rottentomatoes.com/api/public/v1.0/lists/movies/box_office.json', {
params: {
limit : 16,
country : 'us',
apikey: 'rssd8z7pfw5t4nyd3cpszzzm',
callback: 'JSON_CALLBACK'
}
})
.success(function (data) {
$scope.movies = data.movies;
console.log($scope.movies);
});

});
<html ng-app="movies">

<head>
<link rel="stylesheet" hrf="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.min.js"></script>
</head>

<body>
<div class="ng-scope">
Search : <input type="text" placeholder="filter for..." ng-model="search">
</div>
<div ng-view>
{{ message }}
<table ng-controller="movieController" class="ng-cloak">
<tr ng-repeat="movie in movies | filter:search">
<td><a ng-href="{{'/#/movie/'+movie.id}}" ><img ng-src="{{ movie.posters.thumbnail}}"/></a></td>
<td><a ng-href="{{'/#/movie/'+movie.id}}" > {{ movie.title }} </a></td>
</tr>
</table>
</div>

关于angularjs - Angular 路由/路径更改和范围问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28913097/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com