В рамках модального, мне нужно обновить информацию, показанную там, каждый раз, когда она открывается. Но это похоже на все, хранит его в кеше.Как обновить содержимое модуля Bootstrap?
Previous question where the code is.
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">×</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Просто попробуйте удалить куки и кэш в вашем браузере, и убедитесь, что вы открываете файл, который вы на самом деле редактирования!
Было бы очень решительным решением для устранения всего, мне просто нужно обновить контент в Modal. –
Share подробнее и ваш код так, чтобы это можно ответить. –
Я добавил ссылку на предыдущий вопрос, есть код. –