如何更新Bootstrap模態的內容？

-1

在一個模式中，我需要在每次打開時更新那裏顯示的信息。但它似乎就像所有東西一樣，保存在緩存中。如何更新Bootstrap模態的內容？

2016-12-31 David Santiago

分享更多的信息和你的代碼，所以這是可以回答。 –

我添加了一個鏈接到以前的問題，有代碼。 –

Find the solution, using `$router` from AngularJS.

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

 

 
\t helloApp.config(function($routeProvider) { 
 
\t $routeProvider 
 
\t .when("/", { 
 
\t  templateUrl : "modal.html", 
 
\t  controller: 'DataCtrl' 
 
\t }) 
 
\t .when("/red", { 
 
\t  templateUrl : "1.htm" 
 
\t }) 
 
\t .when("/green", { 
 
\t  templateUrl : "2.htm" 
 
\t }) 
 
\t .when("/blue", { 
 
\t  templateUrl : "3.htm" 
 
\t }); 
 
\t }); 
 

 

 
\t helloApp.controller("CompanyCtrl",['$scope',function($scope){ 
 

 
\t \t $scope.numbers = [1,2,3,4,5,6,7,8,9]; 
 
\t \t $scope.tableTitle = "SEMESTRE "; 
 
\t \t $scope.checked1 = false; //DELETE 
 

 
\t \t $scope.number = 7; 
 
\t \t $scope.getNumber = function(num) { 
 
\t \t  return new Array(num); 
 
\t \t } 
 

 
\t \t $scope.companies = [ 
 
\t      { 'name':'Infosys Technologies', 
 
\t      \t 'employees': 125000, 
 
\t      \t 'headoffice': 'Bangalore'}, 
 
\t      \t { 'name':'Cognizant Technologies', 
 
\t \t      \t 'employees': 100000, 
 
\t \t      \t 'headoffice': 'Bangalore'}, 
 
\t \t      \t { 'name':'Wipro', 
 
\t \t \t      \t 'employees': 115000, 
 
\t \t \t      \t 'headoffice': 'Bangalore'}, 
 
\t \t \t      \t { 'name':'Tata Consultancy Services (TCS)', 
 
\t \t \t \t      \t 'employees': 150000, 
 
\t \t \t \t      \t 'headoffice': 'Bangalore'}, 
 
\t \t \t \t      \t { 'name':'HCL Technologies', 
 
\t \t \t \t \t      \t 'employees': 90000, 
 
\t \t \t \t \t      \t 'headoffice': 'Noida'}, 
 
\t      ]; 
 
\t  $scope.vAddGroup = [ 
 

 
\t  ]; 
 

 
\t $scope.addGroup = function(name){ \t 
 
\t \t var index = -1; \t 
 
\t \t var comArr = eval($scope.companies); 
 
\t \t \t for(var i = 0; i < comArr.length; i++) { 
 
\t \t \t \t if(comArr[i].name === name) { 
 
\t \t \t \t \t index = i; 
 
\t \t \t \t \t break; 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t \t if(index === -1) { 
 
\t \t \t \t alert("Something gone wrong"); 
 
\t \t \t } 
 

 
\t \t $scope.vAddGroup.push({ 'name':comArr[index].name, 'employees':comArr[index].employees, 'headoffice':comArr[index].headoffice }); 
 
\t \t $scope.checked1 = true; 
 

 
\t \t var d = document.getElementById("1"); // IDENTIFICADOR UNICO CADA MATERIA 
 
\t \t d.className = " subjectOK not-active"; 
 

 
\t }; 
 

 

 
\t $scope.addRow = function(){ \t \t 
 
\t \t $scope.companies.push({ 'name':$scope.name, 'employees': $scope.employees, 'headoffice':$scope.headoffice }); 
 
\t \t $scope.name=''; 
 
\t \t $scope.employees=''; 
 
\t \t $scope.headoffice=''; 
 
\t }; 
 

 
\t $scope.removeRow = function(name){ \t \t \t \t 
 
\t \t \t var index = -1; \t \t 
 
\t \t \t var comArr = eval($scope.vAddGroup); 
 
\t \t \t for(var i = 0; i < comArr.length; i++) { 
 
\t \t \t \t if(comArr[i].name === name) { 
 
\t \t \t \t \t index = i; 
 
\t \t \t \t \t break; 
 
\t \t \t \t } 
 
\t \t \t } 
 
\t \t \t if(index === -1) { 
 
\t \t \t \t alert("Something gone wrong"); 
 
\t \t \t } 
 
\t \t \t $scope.vAddGroup.splice(index, 1); \t 
 
\t \t \t $scope.checked1 = false; 
 

 

 
\t \t \t var d = document.getElementById(1); // IDENTIFICADOR UNICO CADA MATERIA 
 
\t \t \t d.className = " subject"; 
 
\t \t }; 
 

 
\t }]); 
 

 

 

 
helloApp.controller('DataCtrl', function($scope, $http, $route) { 
 
\t console.log("DataCtrl"); 
 
\t 
 
\t $scope.reloadData = function(){ 
 
\t \t $scope.content = []; 
 
\t \t console.log("Reload before 2"); 
 
\t \t $route.reload(); 
 

 
\t \t console.log("inOpenModal2"); 
 
\t \t $http.get("http://www.w3schools.com/angular/customers.php") 
 
\t \t .then(function(response) { 
 
\t \t  $scope.content = response.data.records; 
 
\t \t }, function(response) { 
 
\t \t  $scope.contentWrong = response.config; 
 
\t \t }); 
 

 
\t \t console.log("Reload after 2"); 
 

 
\t }; 
 
\t 
 
\t \t console.log("inOpenModal1"); 
 
\t \t $http.get("http://www.w3schools.com/angular/customers.php") 
 
\t \t .then(function(response) { 
 
\t \t  $scope.content = response.data.records; 
 
\t \t }, function(response) { 
 
\t \t  $scope.contentWrong = response.config; 
 
\t \t }); 
 

 
\t \t 
 
\t 
 
}); 
 

 

 
function closeModal(){ 
 
\t $('.modalCloseID').modal('hide'); 
 
\t //$('#inbox').remove(); 
 
\t console.log("closeModal"); 
 
} 
 

 
function initModal(){ 
 
\t console.log("initModal"); 
 
}

.subject { 
 
    background-color: #4CAF50; /* Green */ 
 
    /* border: none; */ 
 
    border: 1px solid white; 
 
    border-radius: 4px; 
 
    color: white; 
 
    padding: 1px 25px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    font-size: 14px; 
 
    cursor: pointer; 
 
    cursor: hand; 
 
    line-height:20px; 
 
    -webkit-transition-duration: .4s; /* Safari */ 
 
    transition-duration: .4s; 
 

 
    -webkit-touch-callout: none; /* iOS Safari */ 
 
    -webkit-user-select: none; /* Chrome/Safari/Opera */ 
 
    -khtml-user-select: none; /* Konqueror */ 
 
     -moz-user-select: none; /* Firefox */ 
 
     -ms-user-select: none; /* Internet Explorer/Edge */ 
 
      user-select: none; /* Non-prefixed version, currently 
 
            not supported by any browser */ 
 

 
} 
 
.subject:hover { 
 
    background-color: #241E4E; 
 
    color: white; 
 
    border: 1px solid #555555; 
 
    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); 
 

 
} 
 
.subject:focus { 
 
outline:0px; 
 
} 
 

 
.subjectOK { 
 
\t background-color: white; 
 
    /* border: none; */ 
 
    border: 2px solid black; 
 
    border-radius: 30%; 
 
    color: black; 
 
    padding: 1px 25px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    font-size: 14px; 
 
    cursor:not-allowed; 
 
    line-height:20px; 
 
    -webkit-transition-duration: .4s; /* Safari */ 
 
    transition-duration: .4s; 
 

 

 
    -webkit-touch-callout: none; /* iOS Safari */ 
 
    -webkit-user-select: none; /* Chrome/Safari/Opera */ 
 
    -khtml-user-select: none; /* Konqueror */ 
 
     -moz-user-select: none; /* Firefox */ 
 
     -ms-user-select: none; /* Internet Explorer/Edge */ 
 
      user-select: none; /* Non-prefixed version, currently 
 
            not supported by any browser */ 
 

 
} 
 

 
.csstr { 
 
\t border: 0px solid black; 
 

 
} 
 

 

 
.csstitle { 
 
    border-left: 6px solid red; 
 
    background-color: lightgrey; 
 
} 
 

 
.not-active { 
 
    pointer-events: none; 
 
    cursor: default; 
 
}

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
 
<html ng-app="helloApp"> 
 
<head> 
 

 
\t <meta http-equiv="Expires" content="0"> 
 
\t <meta http-equiv="Last-Modified" content="0"> 
 
\t <meta http-equiv="Cache-Control" content="no-cache, mustrevalidate"> 
 
\t <meta http-equiv="Pragma" content="no-cache"> 
 

 

 
<title>AngularJS</title> 
 

 

 
\t \t <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
 
\t \t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
\t \t <link rel="stylesheet" href="main.css"> 
 
\t \t <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
\t \t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 
\t \t <script type="text/javascript" src="controllers.js"></script> 
 

 
\t \t <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script> 
 

 

 
\t \t \t 
 
</head> 
 
<!-- Controller name goes here --> 
 
<body ng-controller="CompanyCtrl"> 
 
<div ng-app="helloApp" ng-controller="DataCtrl"> 
 

 
\t <h2 class="csstitle">Seleccionar Materias</h2> 
 

 

 

 
\t <div class="table-responsive">   
 
\t <table class="table"> 
 
\t  <thead> 
 
\t  <tr> 
 
\t   <th ng-repeat="number in numbers" class="text-center">{{tableTitle}}{{number}}</th> 
 
\t  </tr> 
 
\t  </thead> 
 
\t  <tbody> 
 
\t  <tr class="csstr" ng-repeat="item in content | limitTo: 7"> 
 

 
\t   <td> <!-- SEMESTRE #1 --> 
 
\t   \t <div id="{{numbers[0]}}" ng-click="reloadData()" class="subject" data-toggle="modal" data-target="#myModal{{numbers[0]}}">{{content[$index].City}} <br/> descripcion <br/> + S1</div> 
 
\t   </td> 
 

 
\t   <td><!-- SEMESTRE #2 --> 
 
\t   \t <div ng-click="openModal()" class="subject" data-toggle="modal" data-target="#myModal{{numbers[1]}}">{{content[$index].City}} <br/> descripcion <br/> + S2</div> 
 
\t   </td> 
 

 
\t   <td><!-- SEMESTRE #3 --> 
 
\t  \t  <div ng-click="openModal()" class="subject" data-toggle="modal" data-target="#myModal{{numbers[2]}}">{{item.City}} <br/> descripcion <br/> + S3</div> \t 
 
\t   </td> 
 

 
\t   <td><!-- SEMESTRE #4 --> 
 
\t   \t <div ng-click="openModal()" class="subject" data-toggle="modal" data-target="#myModal{{numbers[3]}}">{{item.City}} <br/> descripcion <br/> + S4</div> \t 
 
\t   </td> 
 

 
\t   <td><!-- SEMESTRE #5 --> 
 
\t   \t <div ng-click="openModal()" class="subject" data-toggle="modal" data-target="#myModal{{numbers[4]}}">{{item.City}} <br/> descripcion <br/> + S5</div> \t 
 
\t   </td> 
 

 
\t   <td><!-- SEMESTRE #6 --> 
 
\t   \t <div ng-click="openModal()" class="subject" data-toggle="modal" data-target="#myModal{{numbers[5]}}">{{item.City}} <br/> descripcion <br/> + S6</div> \t 
 
\t   </td> 
 

 
\t   <td><!-- SEMESTRE #7 --> 
 
\t   \t <div ng-click="openModal()" class="subject" data-toggle="modal" data-target="#myModal{{numbers[6]}}">{{item.City}} <br/> descripcion <br/> + S7</div> \t 
 
\t   </td> 
 

 
\t   <td><!-- SEMESTRE #8 --> 
 
\t   \t <div ng-click="openModal()" class="subject" data-toggle="modal" data-target="#myModal{{numbers[7]}}">{{item.City}} <br/> descripcion <br/> + S8</div> \t 
 
\t   </td> 
 

 
\t   <td><!-- SEMESTRE #9 --> 
 
\t   \t <div ng-click="openModal()" class="subject" data-toggle="modal" data-target="#myModal{{numbers[8]}}">{{item.City}} <br/> descripcion <br/> + S9</div> \t 
 
\t   </td> 
 

 
\t  </tr> 
 

 
\t  </tbody> 
 
\t </table> 
 
    \t </div> 
 

 

 

 
<div ng-repeat="item in numbers | limitTo: 9"> 
 
    <!-- Modal --> 
 
    <div class="modal fade modalCloseID" id="myModal{{item}}" role="dialog" data-backdrop="static"> 
 
    <div class="modal-dialog modal-lg"> 
 
     <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
      <h4 class="modal-title">Materia # {{item}}</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
      <p>Seleccione un horario.</p> 
 

 
      
 

 
\t \t \t \t \t <label>Filtro</label> 
 
\t \t \t \t \t <input type="text" class="form-control" ng-model="searchKeyword"/> 
 

 
\t \t \t \t \t \t {{content}} 
 
\t \t \t \t \t \t {{contentWrong}} 
 
\t \t \t \t \t 
 

 
\t \t \t \t <div id="inbox"> \t 
 
\t \t \t \t \t <table class="table"> 
 
\t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t <th>Name 
 
\t \t \t \t \t \t \t </th> 
 
\t \t \t \t \t \t \t <th>Employees 
 
\t \t \t \t \t \t \t </th> 
 
\t \t \t \t \t \t \t <th>Head Office 
 
\t \t \t \t \t \t \t </th> 
 
\t \t \t \t \t \t \t <th>Acción 
 
\t \t \t \t \t \t \t </th> 
 
\t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t <tr ng-repeat="company in companies | filter: searchKeyword "> 
 
\t \t \t \t \t \t \t <td> 
 
\t \t \t \t \t \t \t \t {{company.name}} 
 
\t \t \t \t \t \t \t </td> 
 
\t \t \t \t \t \t \t <td> 
 
\t \t \t \t \t \t \t \t {{company.employees}} 
 
\t \t \t \t \t \t \t </td> 
 
\t \t \t \t \t \t \t <td> 
 
\t \t \t \t \t \t \t \t {{company.headoffice}} 
 
\t \t \t \t \t \t \t </td> 
 
\t \t \t \t \t \t \t <td> 
 
\t \t \t \t \t \t \t <input type="button" value="Agregar" class="btn btn-primary" onclick="closeModal()" ng-click="addGroup(company.name)" ng-disabled="checked{{item}}"/> 
 
\t \t \t \t \t \t \t </td> 
 
\t \t \t \t \t \t </tr> 
 
\t \t \t \t \t </table> 
 
\t \t \t \t 
 

 
\t \t \t \t \t <button ng-click="reloadData()"> Reload data</button> 
 

 

 
\t \t \t \t </div> <!-- Contenido dinamico, por cada CLICK --> 
 

 
\t \t 
 

 

 
\t \t \t \t </div> 
 
     \t \t <div class="modal-footer"> 
 
      <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    \t <!-- END MODAL--> 
 
</div> 
 
    
 

 

 

 
\t <hr> 
 
\t <h2 class="csstitle">Materias seleccionadas</h2> 
 

 
\t <table class="table"> 
 
\t \t <tr> 
 
\t \t \t <th>Name 
 
\t \t \t </th> 
 
\t \t \t <th>Employees 
 
\t \t \t </th> 
 
\t \t \t <th>Head Office 
 
\t \t \t </th> 
 
\t \t \t <th>Acción 
 
\t \t \t </th> 
 
\t \t </tr> 
 
\t \t <tr ng-repeat="item in vAddGroup"> 
 
\t \t \t <td> 
 
\t \t \t \t {{item.name}} 
 
\t \t \t </td> 
 
\t \t \t <td> 
 
\t \t \t \t {{item.employees}} 
 
\t \t \t </td> 
 
\t \t \t <td> 
 
\t \t \t \t {{item.headoffice}} 
 
\t \t \t </td> 
 
\t \t \t <td> 
 
\t \t \t <input type="button" value="Eliminar" class="btn btn-danger" ng-click="removeRow(item.name)"/> 
 
\t \t \t </td> 
 
\t \t </tr> 
 
\t </table> 
 

 

 
</div> 
 
</body> 
 
</html> 
 
\t \t

來源

2016-12-31 11:38:18

只要嘗試刪除瀏覽器的Cookie和緩存，並確保你打開，你實際上是在編輯文件！

來源

2016-12-31 03:50:35

這將是一個非常激烈的解決方案，消除一切，我只需要更新莫代爾內的內容。 –

如何更新Bootstrap模態的內容？

回答

相關問題