不缓存或读取缓存 | AngularJS 1.6 | Bootstrap 3.3
Do not cache or read cache | AngularJS 1.6 | Bootstrap 3.3
我有一个模态 Bootstrap，里面有一个调用 $http 和 Angular。
但是只有在加载页面时才会去服务器并检索数据，问题是：
是否可以在每次 Bootstrap 模式打开时调用 "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; //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>
下面是简单的 "as little changes as possible" 答案：
我在您的按钮上添加了 ng-click 并将您的 http-call 包装在一个函数中，该函数在单击任何按钮时都会被调用。
更长（也更正确）的答案包括：
可能会一起从您的项目中删除 jquery，因为 angular 和 jquery 真的不能一起玩。
ng-controller="DataCtrl" ng-repeat="item in numbers" 当您这样做时，您会为每个 "item" 获得一个 DataCtrl 实例。通常使用 angular 和模态框，您只需要一个模态框并在显示和隐藏它时更改内容。 （反正你的应用很小。）
您通过使用按钮循环遍历每一列的数字，让事情变得有点干涩。我可能会更进一步并为 "subject-button" 创建一个指令（因为这里的代码在每个按钮中几乎相同）。并遍历每一行。
或许可以看看 UI Bootstrap。但随着时间的推移，您可能会发现 angular 中模式的快速修复是跳过所有其他依赖项，而只使用 ng-class="'show-modal':showModal" 之类的东西。 Bootstrap-脚本、数据切换和 jquery 只是在已经非常简单的东西上添加层 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>
我有一个模态 Bootstrap，里面有一个调用 $http 和 Angular。
但是只有在加载页面时才会去服务器并检索数据，问题是：
是否可以在每次 Bootstrap 模式打开时调用 "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; //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>
下面是简单的 "as little changes as possible" 答案： 我在您的按钮上添加了 ng-click 并将您的 http-call 包装在一个函数中，该函数在单击任何按钮时都会被调用。
更长（也更正确）的答案包括：
可能会一起从您的项目中删除 jquery，因为 angular 和 jquery 真的不能一起玩。
ng-controller="DataCtrl" ng-repeat="item in numbers"当您这样做时，您会为每个 "item" 获得一个 DataCtrl 实例。通常使用 angular 和模态框，您只需要一个模态框并在显示和隐藏它时更改内容。 （反正你的应用很小。）您通过使用按钮循环遍历每一列的数字，让事情变得有点干涩。我可能会更进一步并为 "subject-button" 创建一个指令（因为这里的代码在每个按钮中几乎相同）。并遍历每一行。
或许可以看看 UI Bootstrap。但随着时间的推移，您可能会发现 angular 中模式的快速修复是跳过所有其他依赖项，而只使用
ng-class="'show-modal':showModal"之类的东西。 Bootstrap-脚本、数据切换和 jquery 只是在已经非常简单的东西上添加层 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>