不缓存或读取缓存| AngularJS 1.6 | Bootstrap 3.3 [英] Do not cache or read cache | AngularJS 1.6 | Bootstrap 3.3
本文介绍了不缓存或读取缓存| AngularJS 1.6 | Bootstrap 3.3的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个模态Bootstrap，在调用中使用Angular进行了 $ http 的调用。
但是，只有在加载页面时，才进入服务器并检索数据，问题是：
是否有可能每次都调用 http
var helloApp = angular.module（' helloApp'，[]）; helloApp.controller（ CompanyCtrl，['$ scope'，function（$ scope）{$ scope.numbers = [1,2,3,4,5,6,7,8,9 ]; $ scope.tableTitle = SEMESTRE; $ scope.checked1 = false; //删除$ scope.number = 7; $ scope.getNumber = function（num）{返回新的Array（num）;} $ scope.companies = [{'名称'：'Infosys Technologies'，'雇员'：125000，'headoffice'：'Bangalore'}，{'name'：'Cognizant Technologies'，'雇员'：100000，'headoffice'：'Bangalor e'}，{'name'：'Wipro'，'employees'：115000，'headoffice'：'Bangalore'}，{'name'：'Tata Consultancy Services（TCS）'，'employees'：150000，'headoffice '：'Bangalore'}，{'name'：'HCL Technologies'，'employees'：90000，'headoffice'：'Noida'}，]; $ scope.vAddGroup = []; $ scope.addGroup = function（name）{var index = -1; var comArr = eval（$ scope.companies）; for（var i = 0; i< comArr.length; i ++）{if（comArr [i] .name === name）{索引= i;打破; }} if（index === -1）{alert（出问题了）; } $ scope.vAddGroup.push（{’名称’：comArr [index] .name，‘雇员’：comArr [index] .employees，‘headoffice’：comArr [index] .headoffice}）； $ scope.checked1 = true; var d = document.getElementById（ 1）; // IDENTIFICADOR UNICO CADA MATERIA d.className = subjectOK非活动状态;}; $ scope.addRow = function（）{$ scope.companies.push（{'name'：$ scope.name，'employees'：$ scope.employees，'headoffice'：$ scope.headoffice}）; $ scope.name =’’； $ scope.employees =’’； $ scope.headoffice =’’;;}; $ scope.removeRow = function（name）{var index = -1; var comArr = eval（$ scope.vAddGroup）; for（var i = 0; i< comArr.length; i ++）{if（comArr [i] .name === name）{索引= i;打破; }} if（index === -1）{alert（出问题了）; } $ scope.vAddGroup.splice（index，1）; $ scope.checked1 = false; var d = document.getElementById（ 1）; // IDENTIFICADOR UNICO CADA MATERIA d.className = subject; };}]）; helloApp.controller（'DataCtrl'，function（$ scope，$ http）{$ http.get（ http://www.w3schools.com/angular/customers.php）.then（function （响应）{$ scope.content = response.data.records;}，函数（响应）{$ scope.contentWrong = response.config;}）;}）;函数closeModal（）{$（。modalCloseID）。 on（'hide.bs.modal'，function（）{}）; console.log（ TEST）; $（'。modalCloseID'）。modal（'hide'）;}
.subject {background-color：＃4CAF50; / *绿色* / / *边框：无； * /边框：1px纯白色； border-radius：4px;白颜色;填充：1px 25px;文本对齐：居中；文字修饰：无；显示：inline-block; font-size：14px;光标：指针；光标：手； line-height：20px; -webkit-transition-duration：.4s; / * Safari * /过渡时间：.4s； -webkit-touch-callout：无； / * iOS Safari * / -webkit-user-select：无； / * Chrome / Safari / Opera * / -khtml-user-select：无； / * Konqueror * / -moz-user-select：无； / * Firefox * / -ms-user-select：无； / * Internet Explorer / Edge * /用户选择：无； / *非前缀版本，当前不受任何浏览器支持* /}。subject：hover {background-color：＃241E4E;白颜色;边框：1px实心＃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 {background-白颜色; / *边框：无； * /边框：2px纯黑色；边界半径：30％；颜色：黑色；填充：1px 25px;文本对齐：居中；文字修饰：无；显示：inline-block; font-size：14px;光标：不允许； line-height：20px; -webkit-transition-duration：.4s; / * Safari * /过渡时间：.4s； -webkit-touch-callout：无； / * iOS Safari * / -webkit-user-select：无； / * Chrome / Safari / Opera * / -khtml-user-select：无； / * Konqueror * / -moz-user-select：无； / * Firefox * / -ms-user-select：无； / * Internet Explorer / Edge * /用户选择：无； / *非前缀版本，当前不受任何浏览器支持* /}。csstr {border：0px纯黑色；}。csstitle {border-left：6px纯红色；背景颜色：浅灰色；}。非活动{指针事件：无；光标：默认值；}
<！DOCTYPE html PUBLIC -// W3C // DTD HTML 4.01 Transitional // EN http://www.w3.org/TR/html4/loose.dtd\"><html ng-app = helloApp>< head> ; < meta http-equiv = Expires content = 0> < meta http-equiv =最后修改 content = 0> < meta http-equiv = Cache-Control content =没有缓存，必须重新验证> <元http-equiv = Pragma content = no-cache>< title> AngularJS< / title> < script type = text / javascript src = https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js>< / script> < link rel = stylesheet href = https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css完整性= sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va + PmSTszz / K68anbousE4 > < link rel = stylesheet href = main.css> < script type = text / javascript src = https://code.jquery.com/jquery-3.1.1.min.js>< / script> < script src = https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js完整性= sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7T< ous" ous < script type = text / javascript src = controllers.js>< / script> < / head><！-控制器名称在此处->< body ng-controller = CompanyCtrl> < h2 class = csstitle& Seleccionar Materias< / h2> < div class = table-sensitive> < table class = table> < thead> < tr> < th ng-repeat =数字数量 class = text-center> {{tableTitle}} {{number}}< / th; < / tr> < / thead> < tbody ng-app = helloApp ng-controller = DataCtrl> < tr class = csstr ng-repeat =内容的项目| limitTo：7> < td> <！-SEMESTRE＃1-> < div id = {{numbers [0]}} class = subject data-toggle = modal data-target =＃myModal {{numbers [0]}}> {{content [$ index] .City}}< br />描述< br /> + S1< / div> < / td> < td>< ;!-SEMESTRE＃2-> < div class = subject data-toggle = modal data-target =＃myModal {{numbers [1]}}> {{content [$ index] .City}}< br />描述< br /> + S2< / div> < / td> < td>< ;!-SEMESTRE＃3-> < div class = subject data-toggle = modal data-target =＃myModal {{numbers [2]}}> {{item.City}}< br />描述< br /> + S3< / div> < / td> < td>< ;!-SEMESTRE＃4-> < div class = subject data-toggle = modal data-target =＃myModal {{numbers [3]}}> {{item.City}}< br />描述< br /> + S4< / div> < / td> < td>< ;!-SEMESTRE＃5-> < div class = subject data-toggle = modal data-target =＃myModal {{numbers [4]}}> {{item.City}}< br />描述< br /> + S5< / div> < / td> < td>< ;!-SEMESTRE＃6-> < div class = subject data-toggle = modal data-target =＃myModal {{numbers [5]}}> {{item.City}}< br />描述< br /> + S6< / div> < / td> < td>< ;!-SEMESTRE＃7-> < div class = subject data-toggle = modal data-target =＃myModal {{numbers [6]}}> {{item.City}}< br />描述< br /> + S7< / div> < / td> < td>< ;!-SEMESTRE＃8-> < div class = subject data-toggle = modal data-target =＃myModal {{numbers [7]}}> {{item.City}}< br />描述< br /> + S8< / div> < / td> < td>< ;!-SEMESTRE＃9-> < div class = subject data-toggle = modal data-target =＃myModal {{numbers [8]}}> {{item.City}}< br />描述< br /> + S9< / div> < / td> < / tr> < / tbody> < / table> < / div>< div ng-app = helloApp ng-controller = DataCtrl ng-repeat =项目数量| limitTo：9> <！-模态-> < 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>材料＃{{item}}< / h4> < / div> < div class = modal-body> < p& Seleccione un horario。< / p> < label< Filtro< / label> < input type = text class = form-control ng-model = searchKeyword /> < div ng-app = helloApp ng-controller = DataCtrl> {{content}} {{contentWrong}}< / div> < table class = table> < tr> < th>名称< / th> < th&Employees< / th> < th总部< / th> < th>Acción< / th> < / tr> < tr ng-repeat =公司中的公司|过滤器：searchKeyword> < td> {{company.name}}< / td> < td> {{company.employees}}< / td> < td> {{company.headoffice}}< / td> < td> < input type = button value = Agregar class = btn btn-primary onclick = closeModal（） ng-click = addGroup（company.name） ng-disabled = checked {{item} } /> < / td> < / tr> < / table> < / div> < div class = modal-footer> < button type = button class = btn btn-default data-dismiss = modal> Cerrar< / button> < / div> < / div> < / div> < / div> <！-END MODAL->< / div> < hr> < h2 class = csstitle>本色seleccionadas< / h2> < table class = table> < tr> < th>名称< / th> < th&Employees< / th> < th总部< / th> < th>Acción< / th> < / tr> < tr ng-repeat = vAddGroup中的项目> < td> {{item.name}}< / td> < td> {{item.employees}}< / td> < td> {{item.headoffice}}< / td> < td> < input type = button value = Eliminar class = btn btn-danger ng-click = removeRow（item.name） /> < / td> < / tr> < / table>< / body>< / html>
解决方案
下面是简单的尽可能少的更改答案：
我在按钮上添加了ng-click并将您的http调用包装在一个函数中，该函数在
更长（更正确）的答案包括：
-
可能从您的项目中一起删除了jquery，因为angular和jquery确实不能很好地发挥所有作用。
-
ng-controller = DataCtrl ng-repeat =数字项这样，您为每个项目获得一个DataCtrl实例。通常在角度和模态中，您只需要一个模态并在显示和隐藏它时更改内容。 （无论如何，当您的应用程序很小时。） -
通过按按钮遍历每一列的数字，可以使事情变得有些干燥。我可能会更进一步，并为主题按钮创建指令（因为这里的代码在每个按钮中几乎都是相同的）。并遍历每一行。
-
也许看看 UI引导程序。但是随着时间的流逝，您可能会发现，角度模式的快速解决方案是跳过所有其他依赖项，而仅使用
ng-class ='show-modal'：showModal。引导脚本，数据切换和jQuery只是在已经很简单的角度/ css上增加了一些层次。
var helloApp = angular.module（'helloApp'，[]）; helloApp.controller（ CompanyCtrl，['$ scope'，function（$ scope）{$ scope.numbers = [1,2,3,4,5,6,7,8,9]; $ scope.tableTitle = SEMESTRE; $ scope.checked1 = false; //删除$ scope.number = 7; $ scope.getNumber = function（num）{return new Array（num）;} $ scope.companies = [{''name'：'Infosys Technologies'，'employees'：125000， 'headoffice'：'Bangalore'}，{'name'：'Cognizant Technologies'，'employees'：100000，'headoffice'：'Bangalore'}，{'name'：'Wipro'， '雇员'：115000，'总部'：'班加罗尔'}，{'名称'：'塔塔咨询服务（TCS）'，'雇员'：150000，'总部'：'班加罗尔'}，{'名称'：' HCL Technologies，员工：90000， headoffice： Noida}，]； $ scope.vAddGroup = []; $ scope.addGroup = function（name）{var index = -1; var comArr = eval（$ scope.companies）; for（var i = 0; i< comArr.length; i ++）{if（comArr [i] .name === name）{索引= i;打破; }} if（index === -1）{alert（出问题了）; } $ scope.vAddGroup.push（{’名称’：comArr [index] .name，‘雇员’：comArr [index] .employees，‘headoffice’：comArr [index] .headoffice}）； $ scope.checked1 = true; var d = document.getElementById（ 1）; // IDENTIFICADOR UNICO CADA MATERIA d.className = subjectOK非活动状态;}; $ scope.addRow = function（）{$ scope.companies.push（{'name'：$ scope.name，'employees'：$ scope.employees，'headoffice'：$ scope.headoffice}）; $ scope.name =’’； $ scope.employees =’’； $ scope.headoffice =’’;;}; $ scope.removeRow = function（name）{var index = -1; var comArr = eval（$ scope.vAddGroup）; for（var i = 0; i< comArr.length; i ++）{if（comArr [i] .name === name）{索引= i;打破; }} if（index === -1）{alert（出问题了）; } $ scope.vAddGroup.splice（index，1）; $ scope.checked1 = false; var d = document.getElementById（ 1）; // IDENTIFICADOR UNICO CADA MATERIA d.className = subject; };}]）; helloApp.controller（'DataCtrl'，function（$ scope，$ http）{$ scope.openModal = function（）{$ http.get（ http://www.w3schools.com/angular/ customer.php）.then（function（response）{$ scope.content = response.data.records;}，function（response）{$ scope.contentWrong = response.config;}）;}; $ scope.openModal（ ）;}）;函数closeModal（）{$（。modalCloseID）。on（'hide.bs.modal'，函数（）{}）; console.log（ TEST）; $（'。modalCloseID'）。modal（'hide'）;}
.subject {background-color：＃4CAF50; / *绿色* / / *边框：无； * /边框：1px纯白色； border-radius：4px;白颜色;填充：1px 25px;文本对齐：居中；文字修饰：无；显示：inline-block; font-size：14px;光标：指针；光标：手； line-height：20px; -webkit-transition-duration：.4s; / * Safari * /过渡时间：.4s； -webkit-touch-callout：无； / * iOS Safari * / -webkit-user-select：无； / * Chrome / Safari / Opera * / -khtml-user-select：无； / * Konqueror * / -moz-user-select：无； / * Firefox * / -ms-user-select：无； / * Internet Explorer / Edge * /用户选择：无； / *非前缀版本，当前不受任何浏览器支持* /}。subject：hover {background-color：＃241E4E;白颜色;边框：1px实心＃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 {background-白颜色; / *边框：无； * /边框：2px纯黑色；边界半径：30％；颜色：黑色；填充：1px 25px;文本对齐：居中；文字修饰：无；显示：inline-block; font-size：14px;光标：不允许； line-height：20px; -webkit-transition-duration：.4s; / * Safari * /过渡时间：.4s； -webkit-touch-callout：无； / * iOS Safari * / -webkit-user-select：无； / * Chrome / Safari / Opera * / -khtml-user-select：无； / * Konqueror * / -moz-user-select：无； / * Firefox * / -ms-user-select：无； / * Internet Explorer / Edge * /用户选择：无； / *非前缀版本，当前不受任何浏览器支持* /}。csstr {border：0px纯黑色；}。csstitle {border-left：6px纯红色；背景颜色：浅灰色；}。非活动{指针事件：无；光标：默认值；}
<！DOCTYPE html PUBLIC -// W3C // DTD HTML 4.01 Transitional // EN http://www.w3.org/TR/html4/loose.dtd\"><html ng-app = helloApp>< head> ; < meta http-equiv = Expires content = 0> < meta http-equiv =最后修改 content = 0> < meta http-equiv = Cache-Control content =没有缓存，必须重新验证> <元http-equiv = Pragma content = no-cache>< title> AngularJS< / title> < script type = text / javascript src = https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js>< / script> < link rel = stylesheet href = https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css完整性= sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va + PmSTszz / K68anbousE4 > < link rel = stylesheet href = main.css> < script type = text / javascript src = https://code.jquery.com/jquery-3.1.1.min.js>< / script> < script src = https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js完整性= sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7T< ous" ous < script type = text / javascript src = controllers.js>< / script> < / head><！-控制器名称在此处->< body ng-controller = CompanyCtrl> < h2 class = csstitle& Seleccionar Materias< / h2> < div class = table-sensitive> < table class = table> < thead> < tr> < th ng-repeat =数字数量 class = text-center> {{tableTitle}} {{number}}< / th; < / tr> < / thead> < tbody ng-app = helloApp ng-controller = DataCtrl> < tr class = csstr ng-repeat =内容的项目| limitTo：7> < td> <！-SEMESTRE＃1-> < div id = {{numbers [0]}} class = subject ng-click = openModal（） data-toggle = modal data-target =＃myModal {{numbers [0]} }> {{content [$ index] .City}}}< br />描述< br /> + S1< / div> < / td> < td>< ;!-SEMESTRE＃2-> < div class = subject ng-click = openModal（） data-toggle = modal data-target =＃myModal {{numbers [1]}}> {{content [$ index]。城市}}< br />描述< br /> + S2< / div> < / td> < td>< ;!-SEMESTRE＃3-> < div class = subject ng-click = openModal（） data-toggle = modal data-target =＃myModal {{numbers [2]}}> {{item.City}}< ; br />描述< br /> + S3< / div> < / td> < td>< ;!-SEMESTRE＃4-> < div class = subject ng-click = openModal（） data-toggle = modal data-target =＃myModal {{numbers [3]}}> {{item.City}}< ; br />描述< br /> + S4< / div> < / td> < td>< ;!-SEMESTRE＃5-> < div class = subject ng-click = openModal（） data-toggle = modal data-target =＃myModal {{numbers [4]}}> {{item.City}}< ; br />描述< br /> + S5< / div> < / td> < td>< ;!-SEMESTRE＃6-> < div class = subject ng-click = openModal（） data-toggle = modal data-target =＃myModal {{numbers [5]}}> {{item.City}}< ; br />描述< br /> + S6< / div> < / td> < td>< ;!-SEMESTRE＃7-> < div class = subject ng-click = openModal（） data-toggle = modal data-target =＃myModal {{numbers [6]}}> {{item.City}}< ; br />描述< br /> + S7< / div> < / td> < td>< ;!-SEMESTRE＃8-> < div class = subject ng-click = openModal（） data-toggle = modal data-target =＃myModal {{numbers [7]}}> {{item.City}}< ; br />描述< br /> + S8< / div> < / td> < td>< ;!-SEMESTRE＃9-> < div class = subject ng-click = openModal（） data-toggle = modal data-target =＃myModal {{numbers [8]}}> {{item.City}}< ; br />描述< br /> + S9< / div> < / td> < / tr> < / tbody> < / table> < / div>< div ng-app = helloApp ng-controller = DataCtrl ng-repeat =项目数量| limitTo：9> <！-模态-> < 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>材料＃{{item}}< / h4> < / div> < div class = modal-body> < p& Seleccione un horario。< / p> < label< Filtro< / label> < input type = text class = form-control ng-model = searchKeyword /> < div ng-app = helloApp ng-controller = DataCtrl> {{content}} {{contentWrong}}< / div> < table class = table> < tr> < th>名称< / th> < th&Employees< / th> < th总部< / th> < th>Acción< / th> < / tr> < tr ng-repeat =公司中的公司|过滤器：searchKeyword> < td> {{company.name}}< / td> < td> {{company.employees}}< / td> < td> {{company.headoffice}}< / td> < td> < input type = button value = Agregar class = btn btn-primary onclick = closeModal（） ng-click = addGroup（company.name） ng-disabled = checked {{item} } /> < / td> < / tr> < / table> < / div> < div class = modal-footer> < button type = button class = btn btn-default data-dismiss = modal> Cerrar< / button> < / div> < / div> < / div> < / div> <！-END MODAL->< / div> < hr> < h2 class = csstitle>本色seleccionadas< / h2> < table class = table> < tr> < th>名称< / th> < th&Employees< / th> < th总部< / th> < th>Acción< / th> < / tr> < tr ng-repeat = vAddGroup中的项目> < td> {{item.name}}< / td> < td> {{item.employees}}< / td> < td> {{item.headoffice}}< / td> < td> < input type = button value = Eliminar class = btn btn-danger ng-click = removeRow（item.name） /> < / td> < / tr> < / table>< / body>< / html>
I have a modal Bootstrap, inside a call is made $http with Angular.
But only when loading the page goes to the server and retrieves the data, the question is:
Is it possible to make the call to "http" every time the Bootstrap Modal is opened?
var helloApp = angular.module('helloApp',[]);
helloApp.controller("CompanyCtrl",['$scope',function($scope){
$scope.numbers = [1,2,3,4,5,6,7,8,9];
$scope.tableTitle = "SEMESTRE ";
$scope.checked1 = false; //DELETE
$scope.number = 7;
$scope.getNumber = function(num) {
return new Array(num);
}
$scope.companies = [
{ 'name':'Infosys Technologies',
'employees': 125000,
'headoffice': 'Bangalore'},
{ 'name':'Cognizant Technologies',
'employees': 100000,
'headoffice': 'Bangalore'},
{ 'name':'Wipro',
'employees': 115000,
'headoffice': 'Bangalore'},
{ 'name':'Tata Consultancy Services (TCS)',
'employees': 150000,
'headoffice': 'Bangalore'},
{ 'name':'HCL Technologies',
'employees': 90000,
'headoffice': 'Noida'},
];
$scope.vAddGroup = [
];
$scope.addGroup = function(name){
var index = -1;
var comArr = eval( $scope.companies );
for( var i = 0; i < comArr.length; i++ ) {
if( comArr[i].name === name ) {
index = i;
break;
}
}
if( index === -1 ) {
alert( "Something gone wrong" );
}
$scope.vAddGroup.push({ 'name':comArr[index].name, 'employees':comArr[index].employees, 'headoffice':comArr[index].headoffice });
$scope.checked1 = true;
var d = document.getElementById("1"); // IDENTIFICADOR UNICO CADA MATERIA
d.className = " subjectOK not-active";
};
$scope.addRow = function(){
$scope.companies.push({ 'name':$scope.name, 'employees': $scope.employees, 'headoffice':$scope.headoffice });
$scope.name='';
$scope.employees='';
$scope.headoffice='';
};
$scope.removeRow = function(name){
var index = -1;
var comArr = eval( $scope.vAddGroup );
for( var i = 0; i < comArr.length; i++ ) {
if( comArr[i].name === name ) {
index = i;
break;
}
}
if( index === -1 ) {
alert( "Something gone wrong" );
}
$scope.vAddGroup.splice( index, 1 );
$scope.checked1 = false;
var d = document.getElementById("1"); // IDENTIFICADOR UNICO CADA MATERIA
d.className = " subject";
};
}]);
helloApp.controller('DataCtrl', function($scope, $http) {
$http.get("http://www.w3schools.com/angular/customers.php")
.then(function(response) {
$scope.content = response.data.records;
}, function(response) {
$scope.contentWrong = response.config;
});
});
function closeModal(){
$(".modalCloseID").on('hide.bs.modal', function () {
});
console.log("TEST");
$('.modalCloseID').modal('hide');
}
.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 {
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 {
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>
<meta http-equiv="Expires" content="0">
<meta http-equiv="Last-Modified" content="0">
<meta http-equiv="Cache-Control" content="no-cache, mustrevalidate">
<meta http-equiv="Pragma" content="no-cache">
<title>AngularJS</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript" src="controllers.js"></script>
</head>
<!-- Controller name goes here -->
<body ng-controller="CompanyCtrl">
<h2 class="csstitle">Seleccionar Materias</h2>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th ng-repeat="number in numbers" class="text-center">{{tableTitle}}{{number}}</th>
</tr>
</thead>
<tbody ng-app="helloApp" ng-controller="DataCtrl">
<tr class="csstr" ng-repeat="item in content | limitTo: 7">
<td> <!-- SEMESTRE #1 -->
<div id="{{numbers[0]}}" class="subject" data-toggle="modal" data-target="#myModal{{numbers[0]}}">{{content[$index].City}} <br/> descripcion <br/> + S1</div>
</td>
<td><!-- SEMESTRE #2 -->
<div class="subject" data-toggle="modal" data-target="#myModal{{numbers[1]}}">{{content[$index].City}} <br/> descripcion <br/> + S2</div>
</td>
<td><!-- SEMESTRE #3 -->
<div class="subject" data-toggle="modal" data-target="#myModal{{numbers[2]}}">{{item.City}} <br/> descripcion <br/> + S3</div>
</td>
<td><!-- SEMESTRE #4 -->
<div class="subject" data-toggle="modal" data-target="#myModal{{numbers[3]}}">{{item.City}} <br/> descripcion <br/> + S4</div>
</td>
<td><!-- SEMESTRE #5 -->
<div class="subject" data-toggle="modal" data-target="#myModal{{numbers[4]}}">{{item.City}} <br/> descripcion <br/> + S5</div>
</td>
<td><!-- SEMESTRE #6 -->
<div class="subject" data-toggle="modal" data-target="#myModal{{numbers[5]}}">{{item.City}} <br/> descripcion <br/> + S6</div>
</td>
<td><!-- SEMESTRE #7 -->
<div class="subject" data-toggle="modal" data-target="#myModal{{numbers[6]}}">{{item.City}} <br/> descripcion <br/> + S7</div>
</td>
<td><!-- SEMESTRE #8 -->
<div class="subject" data-toggle="modal" data-target="#myModal{{numbers[7]}}">{{item.City}} <br/> descripcion <br/> + S8</div>
</td>
<td><!-- SEMESTRE #9 -->
<div class="subject" data-toggle="modal" data-target="#myModal{{numbers[8]}}">{{item.City}} <br/> descripcion <br/> + S9</div>
</td>
</tr>
</tbody>
</table>
</div>
<div ng-app="helloApp" ng-controller="DataCtrl" 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>
<label>Filtro</label>
<input type="text" class="form-control" ng-model="searchKeyword"/>
<div ng-app="helloApp" ng-controller="DataCtrl">
{{content}}
{{contentWrong}}
</div>
<table class="table">
<tr>
<th>Name
</th>
<th>Employees
</th>
<th>Head Office
</th>
<th>Acción
</th>
</tr>
<tr ng-repeat="company in companies | filter: searchKeyword ">
<td>
{{company.name}}
</td>
<td>
{{company.employees}}
</td>
<td>
{{company.headoffice}}
</td>
<td>
<input type="button" value="Agregar" class="btn btn-primary" onclick="closeModal()" ng-click="addGroup(company.name)" ng-disabled="checked{{item}}"/>
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
<!-- END MODAL-->
</div>
<hr>
<h2 class="csstitle">Materias seleccionadas</h2>
<table class="table">
<tr>
<th>Name
</th>
<th>Employees
</th>
<th>Head Office
</th>
<th>Acción
</th>
</tr>
<tr ng-repeat="item in vAddGroup">
<td>
{{item.name}}
</td>
<td>
{{item.employees}}
</td>
<td>
{{item.headoffice}}
</td>
<td>
<input type="button" value="Eliminar" class="btn btn-danger" ng-click="removeRow(item.name)"/>
</td>
</tr>
</table>
</body>
</html>
解决方案
Below is the easy "as little changes as possible" answer: I added ng-click on your buttons and wrapped your http-call in a function which is called when clicking any of the buttons.
The longer (and more correct) answer would include:
Probably scrapping jquery from your project all together, because angular and jquery really doesn't play all that well together.
ng-controller="DataCtrl" ng-repeat="item in numbers"When you do this, you get one DataCtrl-instance for each "item". Usually with angular and modals, you only want one modal and change the content as you show and hide it. (When your app is small anyway.)You have made things a little bit DRY-er by looping through your numbers for each column with buttons. I would probably take that further and create a directive for a "subject-button" (Since the code here is almost identical in every button). And loop through each row as well.
Maybe have a look at UI Bootstrap. But in time you'll probably figure out that the quick fix for modals in angular is to skip all other dependencies and just use something like
ng-class="'show-modal':showModal". Bootstrap-scripts, data-toggles and jquery are just adding layers to something that is already very simple with straight up angular/css.
var helloApp = angular.module('helloApp',[]);
helloApp.controller("CompanyCtrl",['$scope',function($scope){
$scope.numbers = [1,2,3,4,5,6,7,8,9];
$scope.tableTitle = "SEMESTRE ";
$scope.checked1 = false; //DELETE
$scope.number = 7;
$scope.getNumber = function(num) {
return new Array(num);
}
$scope.companies = [
{ 'name':'Infosys Technologies',
'employees': 125000,
'headoffice': 'Bangalore'},
{ 'name':'Cognizant Technologies',
'employees': 100000,
'headoffice': 'Bangalore'},
{ 'name':'Wipro',
'employees': 115000,
'headoffice': 'Bangalore'},
{ 'name':'Tata Consultancy Services (TCS)',
'employees': 150000,
'headoffice': 'Bangalore'},
{ 'name':'HCL Technologies',
'employees': 90000,
'headoffice': 'Noida'},
];
$scope.vAddGroup = [
];
$scope.addGroup = function(name){
var index = -1;
var comArr = eval( $scope.companies );
for( var i = 0; i < comArr.length; i++ ) {
if( comArr[i].name === name ) {
index = i;
break;
}
}
if( index === -1 ) {
alert( "Something gone wrong" );
}
$scope.vAddGroup.push({ 'name':comArr[index].name, 'employees':comArr[index].employees, 'headoffice':comArr[index].headoffice });
$scope.checked1 = true;
var d = document.getElementById("1"); // IDENTIFICADOR UNICO CADA MATERIA
d.className = " subjectOK not-active";
};
$scope.addRow = function(){
$scope.companies.push({ 'name':$scope.name, 'employees': $scope.employees, 'headoffice':$scope.headoffice });
$scope.name='';
$scope.employees='';
$scope.headoffice='';
};
$scope.removeRow = function(name){
var index = -1;
var comArr = eval( $scope.vAddGroup );
for( var i = 0; i < comArr.length; i++ ) {
if( comArr[i].name === name ) {
index = i;
break;
}
}
if( index === -1 ) {
alert( "Something gone wrong" );
}
$scope.vAddGroup.splice( index, 1 );
$scope.checked1 = false;
var d = document.getElementById("1"); // IDENTIFICADOR UNICO CADA MATERIA
d.className = " subject";
};
}]);
helloApp.controller('DataCtrl', function($scope, $http) {
$scope.openModal = function(){
$http.get("http://www.w3schools.com/angular/customers.php")
.then(function(response) {
$scope.content = response.data.records;
}, function(response) {
$scope.contentWrong = response.config;
});
};
$scope.openModal();
});
function closeModal(){
$(".modalCloseID").on('hide.bs.modal', function () {
});
console.log("TEST");
$('.modalCloseID').modal('hide');
}
.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 {
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 {
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>
<meta http-equiv="Expires" content="0">
<meta http-equiv="Last-Modified" content="0">
<meta http-equiv="Cache-Control" content="no-cache, mustrevalidate">
<meta http-equiv="Pragma" content="no-cache">
<title>AngularJS</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript" src="controllers.js"></script>
</head>
<!-- Controller name goes here -->
<body ng-controller="CompanyCtrl">
<h2 class="csstitle">Seleccionar Materias</h2>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th ng-repeat="number in numbers" class="text-center">{{tableTitle}}{{number}}</th>
</tr>
</thead>
<tbody ng-app="helloApp" ng-controller="DataCtrl">
<tr class="csstr" ng-repeat="item in content | limitTo: 7">
<td> <!-- SEMESTRE #1 -->
<div id="{{numbers[0]}}" class="subject" ng-click="openModal()" data-toggle="modal" data-target="#myModal{{numbers[0]}}">{{content[$index].City}} <br/> descripcion <br/> + S1</div>
</td>
<td><!-- SEMESTRE #2 -->
<div class="subject" ng-click="openModal()" data-toggle="modal" data-target="#myModal{{numbers[1]}}">{{content[$index].City}} <br/> descripcion <br/> + S2</div>
</td>
<td><!-- SEMESTRE #3 -->
<div class="subject" ng-click="openModal()" data-toggle="modal" data-target="#myModal{{numbers[2]}}">{{item.City}} <br/> descripcion <br/> + S3</div>
</td>
<td><!-- SEMESTRE #4 -->
<div class="subject" ng-click="openModal()" data-toggle="modal" data-target="#myModal{{numbers[3]}}">{{item.City}} <br/> descripcion <br/> + S4</div>
</td>
<td><!-- SEMESTRE #5 -->
<div class="subject" ng-click="openModal()" data-toggle="modal" data-target="#myModal{{numbers[4]}}">{{item.City}} <br/> descripcion <br/> + S5</div>
</td>
<td><!-- SEMESTRE #6 -->
<div class="subject" ng-click="openModal()" data-toggle="modal" data-target="#myModal{{numbers[5]}}">{{item.City}} <br/> descripcion <br/> + S6</div>
</td>
<td><!-- SEMESTRE #7 -->
<div class="subject" ng-click="openModal()" data-toggle="modal" data-target="#myModal{{numbers[6]}}">{{item.City}} <br/> descripcion <br/> + S7</div>
</td>
<td><!-- SEMESTRE #8 -->
<div class="subject" ng-click="openModal()" data-toggle="modal" data-target="#myModal{{numbers[7]}}">{{item.City}} <br/> descripcion <br/> + S8</div>
</td>
<td><!-- SEMESTRE #9 -->
<div class="subject" ng-click="openModal()" data-toggle="modal" data-target="#myModal{{numbers[8]}}">{{item.City}} <br/> descripcion <br/> + S9</div>
</td>
</tr>
</tbody>
</table>
</div>
<div ng-app="helloApp" ng-controller="DataCtrl" 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>
<label>Filtro</label>
<input type="text" class="form-control" ng-model="searchKeyword"/>
<div ng-app="helloApp" ng-controller="DataCtrl">
{{content}}
{{contentWrong}}
</div>
<table class="table">
<tr>
<th>Name
</th>
<th>Employees
</th>
<th>Head Office
</th>
<th>Acción
</th>
</tr>
<tr ng-repeat="company in companies | filter: searchKeyword ">
<td>
{{company.name}}
</td>
<td>
{{company.employees}}
</td>
<td>
{{company.headoffice}}
</td>
<td>
<input type="button" value="Agregar" class="btn btn-primary" onclick="closeModal()" ng-click="addGroup(company.name)" ng-disabled="checked{{item}}"/>
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
</div>
</div>
</div>
</div>
<!-- END MODAL-->
</div>
<hr>
<h2 class="csstitle">Materias seleccionadas</h2>
<table class="table">
<tr>
<th>Name
</th>
<th>Employees
</th>
<th>Head Office
</th>
<th>Acción
</th>
</tr>
<tr ng-repeat="item in vAddGroup">
<td>
{{item.name}}
</td>
<td>
{{item.employees}}
</td>
<td>
{{item.headoffice}}
</td>
<td>
<input type="button" value="Eliminar" class="btn btn-danger" ng-click="removeRow(item.name)"/>
</td>
</tr>
</table>
</body>
</html>
这篇关于不缓存或读取缓存| AngularJS 1.6 | Bootstrap 3.3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
