gpt4 book ai didi

javascript - 当我重新加载禁用时,使用 angularjs 禁用 ng-repeat 按钮不起作用?

转载 作者:行者123 更新时间:2023-11-29 19:23:10 25 4
gpt4 key购买 nike

我有商店列表,一旦用户单击禁用的应用按钮但当我重新加载该页面时,它会显示基于服务的一个接受按钮禁用不工作。期望:一旦用户点击“应用按钮”按钮,当用户访问该页面时按钮应该被禁用。

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

app.controller('MainCtrl', function($scope) {
$scope.name = 'World';

$scope.services = [
{_id: 1, title: "Service 1"},
{_id: 2, title: "Service 2"},
{_id: 3, title: "Service 3"}
];

$scope.apply = function(service){
console.log(service._id + " clicked");
service.clicked = true;
}

});
<!DOCTYPE html>
<html ng-app="plunker">

<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.17/angular.js" data-semver="1.3.17"></script>
<script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>

<div class="list card" data-ng-repeat="service in services">
<i> {{service.title}} </i>
<button ng-click="apply(service)" ng-disabled="service.clicked">apply</button>

</div>
</body>

</html>

最佳答案

我相信您应该使用 ngRoute module 来进行 SPA 之类的事情& 这将根据他们的 url 有不同的 View 。

与其将变量存储在 Controller 中,不如创建一个服务,该服务将具有可共享的变量。当您转到应用程序中的其他页面时,一旦带有 Controller 的其他模板加载到页面,依赖 Controller 就会破坏其范围。

服务

app.service('dataService', function(){
this.services = [
{_id: 1, title: "Service 1"},
{_id: 2, title: "Service 2"},
{_id: 3, title: "Service 3"}
];

})

Controller

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

app.controller('MainCtrl', function($scope, dataService) {
$scope.name = 'World';

$scope.services = dataService.services;

$scope.apply = function(service){
console.log(service._id + " clicked");
service.clicked = true;
}

});

关于javascript - 当我重新加载禁用时,使用 angularjs 禁用 ng-repeat 按钮不起作用?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32182665/

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