gpt4 book ai didi

javascript - ng-view没有从href获取数据?

转载 作者:行者123 更新时间:2023-11-28 15:03:14 25 4
gpt4 key购买 nike

我尝试使用 AngularJS 来创建一个产品页面。这是我第一次使用 AngularJS 创建页面。

当我单击“添加到购物车”页面时,

ng-view 不起作用。它没有显示任何响应。

我已经通过所有教程验证了代码。看来是对的。

谁能告诉我我做错了什么。

下面我提到了代码。抱歉,无法将代码放入 jsfiddle 中。它不约束正常日期。

代码:

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

app.config(function($routeProvider, $locationProvider) {
$routeProvider
.when('/red', {
templateUrl: 'dashboard.html',
controller: 'myCtrl',
})
.when('/green', {
templateUrl: 'custom_directives.html',
controller: 'myCtrl'
})
.when('/yellow', {
templateUrl: 'custom_directives.html',
controller: 'myCtrl'
})
.when('/black', {
templateUrl: 'custom_directives.html',
controller: 'myCtrl'
})
.when('/grey', {
templateUrl: 'custom_directives.html',
controller: 'myCtrl'
})
.when('/blue', {
templateUrl: 'custom_directives.html',
controller: 'myCtrl'
});

// configure html5 to get links working on jsfiddle
$locationProvider.html5Mode({
enabled: true,
requireBase: false
});
});
app.controller("myCtrl", function($scope) {
$scope.records = [{
"Name": "Alfreds Futterkiste",
"Country": "Germany",
"Dollar": "$21.00",
"URL": "red"
}, {
"Name": "Berglunds snabbköp",
"Country": "Sweden",
"Dollar": "$21.00",
"URL": "green"
}, {
"Name": "Centro comercial Moctezuma",
"Country": "Mexico",
"Dollar": "$21.00",
"URL": "yellow"
}, {
"Name": "Ernst Handel",
"Country": "Austria",
"Dollar": "$21.00",
"URL": "black"

}, {
"Name": "Ernst Jubilie",
"Country": "Canada",
"Dollar": "$21.00",
"URL": "grey"
}, {
"Name": "Idris_09090",
"Country": "India",
"Dollar": "$43.00",
"URL": "blue"
}]

});
li.list-group-item {
position: relative;
display: inline-block;
margin-bottom: -1px;
background-color: #D38585;
border: 1px solid #ddd;
width: 25%;
height: 210px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>

<body ng-app="myApp" style="background-color: #2a2326;" ng-controller="myCtrl">

<div class="container">
<div class="well well-sm" style="background-color:#2a2326; color:white; text-align:center; font-size:30px;">
<h4><strong>Water Products</strong></h4>
</div>
<div class="item col-xs-12 col-lg-4" ng-repeat="x in records">
<div class="thumbnail">
<img class="group list-group-image" src="http://placehold.it/400x250/000/fff" alt="" />
<div class="caption">
<h4 class="group inner list-group-item-heading">
{{x.Name}}</h4>
<p class="group inner list-group-item-text">
{{x.Country}}</p>
<div class="row">
<div class="col-xs-12 col-md-6">
<p class="lead">
{{x.Dollar}}</p>
</div>
<div class="col-xs-12 col-md-6">
<a class="btn btn-success" ng-href="#{{x.URL}}">Add to cart</a>
</div>
</div>
</div>
</div>
</div>
<div ng-view></div>
</div>

请帮忙解决这个问题。

最佳答案

删除

$locationProvider.html5Mode({
enabled: true,
requireBase: false
});

将您的网址更改为 <a class="btn btn-success" ng-href="#/{{x.URL}}">Add to cart</a>

演示:

https://plnkr.co/edit/5odGEUq0eK8tGR8IxohW?p=preview

关于javascript - ng-view没有从href获取数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40171821/

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