Rev 1576 | Blame | Compare with Previous | Last modification | View Log | RSS feed
<!DOCTYPE html>
<html>
<head>
<script src="<%=request.getContextPath()%>/js/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquerytables/bootstrap/js/bootstrap.js"></script>
<link rel="stylesheet" href="<%=request.getContextPath()%>/js/jquerytables/bootstrap/css/bootstrap.css" type="text/css"/>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquerytables/jquery-2.1.4.min.js"></script>
</head>
<body ng-app="BacoAngularApp">
<script>
var GLOBAL_BacoAngularAppDependencies = [];
angular.module('BacoAngularApp', GLOBAL_BacoAngularAppDependencies);
</script>
<div class="container">
<h1>Exemplo de Biding entre uma caixa de texto e uma view</h1>
<p>
Sempre que a caixa de texto é alterada a view muda. Pode-mos por exemplo
aguardar por uma resposta em json de um Widget e usar o json para preencher o
input field para mais tarde enviar ao Controlador de Struts como texto.
Entretanto podemos prencher uma View com esse input.
</p>
<div id="myApp1" ng-app="myApp1" ng-controller="myCtrl1">
<p>Experimente a copiar este pedaço de JSON e a colar no input:</p>
<pre>{"uploadedFiles" : [ {"fileName":"teste3.zip"}, {"fileName":"teste4.zip"} ]}</pre>
<div class="row clearfix">
<div class="form-group">
<div class="col-md-2">
<label class="control-label">Exemplo de JSON associado onchange à view:</label>
</div>
<div class="col-md-10">
<input class="form-control" type="text" id="ModeloBaseMsgInput" value="" />
</div>
</div>
<div class="form-group">
<div class="col-md-2">
<label class="control-label">Exemplo de JSON autoUpdate associado ao modelo da view:</label>
</div>
<div class="col-md-10">
<input class="form-control" readonly="true" type="text" id="ModeloBase" value="{{files}}" />
</div>
</div>
</div>
<!-- ZONA DE VIEW -->
<div class="row">
<h2>VIEW ANGULAR</h2>
<div class="list-group col-md-4">
<div class="list-group-item clearfix" ng-repeat="f in files.uploadedFiles">
{{ f.fileName }}
</div>
</div>
</div>
<!-- ZONA DE VIEW COM AFETACAO INVERSA -->
<div class="row">
<h2>VIEW ANGULAR COM AFETAÇÃO NO MODELO</h2>
<div class="list-group col-md-4">
<div class="list-group-item clearfix" ng-repeat="f in files.uploadedFiles">
<input type="text" ng-model="f.fileName"/>
</div>
</div>
</div>
</div>
<script>
//Especifico da aplicacao
var app1 = angular.module('myApp1', []);
GLOBAL_BacoAngularAppDependencies.push('myApp1');
app1.controller('myCtrl1', function($scope) {
$scope.files = { service: "ok" , "uploadedFiles" : [ {"fileName":"0000.zip"} ]}
});
//Vamos programar a mudança da variavel para mudar a lista de items
$(document).ready(function()
{
$("#ModeloBaseMsgInput").change(function()
{
var uploadedIncomingJson = JSON.parse($("#ModeloBaseMsgInput").val());
angular.element($("#myApp1")).scope().files.uploadedFiles = uploadedIncomingJson.uploadedFiles;
//SEMPRE QUE SE ALTERA UM modulo de fora para dentro temos de invocar
// o $apply socre o scope para alterar a view
angular.element($("#myApp1")).scope().$apply();
});
});
</script>
</div>
</div>
</body>
</html>