禁用ng-repeat with button使用angularjs，当我重新加载禁用不工作

disabled ng-repeat with button using angularjs when i am reloading disabled not working?

本文关键字：加载 工作 新加载 button with ng-repeat 使用 angularjs 禁用      更新时间：2023-09-26

我有商店的列表，这是显示基于一个接受按钮的服务，一旦用户点击应用按钮禁用，但当我重新加载该页面Disabled不工作。期望:一旦用户点击应用按钮按钮应该被禁用，当用户进入该页面按钮应该被禁用。

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模块 &这将有不同的视图基于他们的url。

你应该创建一个服务，而不是在控制器中存储变量，它将具有共享变量。当你转到应用程序的其他页面时，依赖控制器的模板会在另一个带控制器的模板加载到该页中时立即销毁它的作用域。

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

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;
  }
});

一个选项是保存到localStorage。当选项卡/窗口关闭时，这将持续存在。然而，它是客户端存储。如果用户在新浏览器中打开它，它将没有这些数据。如果数据需要跨机器持久化，那么后端数据库可能是更好的选择。

localStorage和sessionStorage将对象存储为键值对。其中将值转换为字符串。你必须决定最适合你需要的结构。

我决定用一个键将所有内容存储为JSON。这意味着在每次读取时我都必须解析它。保存它意味着我必须读取所有内容，修改我需要的项目，然后将它们全部保存回来。

另一个备选方案是indexedDB，它是一个客户端数据库。允许复杂的数据结构，并且不需要您首先对对象进行字符串化，但是实现起来更复杂，并且不像localStorage那样得到很好的支持。

这里是一个非常粗略的localStorage的快速概念:http://jsfiddle.net/15xw00ar/

以下是该服务的具体细节:

app.service('ServiceHelper', function(){    
    //Our service helper service
    this.get = function(){
        //Read service from local storage, remember its saved as a string so parse
        return JSON.parse(localStorage.getItem('services'));
    }
    this.save = function (title) {
        //Save a new service. First have to read all, append new service then save all
        var services = this.get('services') || [];
        services.push({title: title, accepted: false});
        localStorage.setItem('services', JSON.stringify(services));
    }
    this.markedAsAccepted = function (i){
        //Mark service as accepted at a certain index
        var services = this.get();
        services[i].accepted = true;
        localStorage.setItem('services', JSON.stringify(services));
    }
});

一些文档:https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_APIhttps://developer.mozilla.org/en/docs/Web/API/Window/localStorage

相关文章：