Subversion Repositories bacoAlunos

Rev

Rev 1576 | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
1576 jmachado 1 
<!DOCTYPE html>
2 
<html>
3 
<head>
4 
    <script src="<%=request.getContextPath()%>/js/angularjs/1.4.8/angular.min.js"></script>
5 
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquerytables/bootstrap/js/bootstrap.js"></script>
6 
    <link rel="stylesheet" href="<%=request.getContextPath()%>/js/jquerytables/bootstrap/css/bootstrap.css" type="text/css"/>
7 
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquerytables/jquery-2.1.4.min.js"></script>
8 
</head>
9 
<body ng-app="BacoAngularApp">
10 
<script>
11 
    var GLOBAL_BacoAngularAppDependencies = [];
12 
    angular.module('BacoAngularApp', GLOBAL_BacoAngularAppDependencies);
13 
</script>
14 
 
15 
<div class="container">
16 
    <h1>Exemplo de Biding entre uma caixa de texto e uma view</h1>
17 
    <p>
18 
        Sempre que a caixa de texto é alterada a view muda. Pode-mos por exemplo
19 
        aguardar por uma resposta em json de um Widget e usar o json para preencher o
20 
        input field para mais tarde enviar ao Controlador de Struts como texto.
21 
        Entretanto podemos prencher uma View com esse input.
22 
    </p>
23 
 
24 
    <div  id="myApp1" ng-app="myApp1" ng-controller="myCtrl1">
25 
 
26 
        <p>Experimente a copiar este pedaço de JSON e a colar no input:</p>
27 
 
28 
        <pre>{"uploadedFiles" : [ {"fileName":"teste3.zip"}, {"fileName":"teste4.zip"} ]}</pre>
29 
 
30 
        <div class="row clearfix">
31 
            <div class="form-group">
32 
                <div class="col-md-2">
33 
                    <label class="control-label">Exemplo de JSON associado onchange à view:</label>
34 
                </div>
35 
                <div class="col-md-10">
1577 jmachado 36 
                    <input class="form-control" type="text" id="ModeloBaseMsgInput" value="" />
1576 jmachado 37 
                </div>
38 
            </div>
1577 jmachado 39 
 
40 
            <div class="form-group">
41 
                <div class="col-md-2">
42 
                    <label class="control-label">Exemplo de JSON autoUpdate associado ao modelo da view:</label>
43 
                </div>
44 
                <div class="col-md-10">
45 
                    <input class="form-control" readonly="true" type="text" id="ModeloBase" value="{{files}}" />
46 
                </div>
47 
            </div>
1576 jmachado 48 
        </div>
49 
 
50 
        <!-- ZONA DE VIEW -->
51 
        <div class="row">
52 
            <h2>VIEW ANGULAR</h2>
53 
            <div class="list-group col-md-4">
54 
                <div class="list-group-item clearfix" ng-repeat="f in files.uploadedFiles">
55 
                    {{ f.fileName }}
56 
                </div>
57 
            </div>
58 
        </div>
59 
 
60 
        <!-- ZONA DE VIEW COM AFETACAO INVERSA -->
61 
        <div class="row">
62 
            <h2>VIEW ANGULAR COM AFETAÇÃO NO MODELO</h2>
63 
            <div class="list-group col-md-4">
64 
                <div class="list-group-item clearfix" ng-repeat="f in files.uploadedFiles">
65 
                    <input type="text" ng-model="f.fileName"/>
66 
                </div>
67 
            </div>
68 
        </div>
69 
 
70 
    </div>
71 
    <script>
72 
 
73 
 
74 
        //Especifico da aplicacao
75 
        var app1 = angular.module('myApp1', []);
76 
        GLOBAL_BacoAngularAppDependencies.push('myApp1');
77 
 
78 
        app1.controller('myCtrl1', function($scope) {
79 
            $scope.files = { service: "ok" , "uploadedFiles" : [ {"fileName":"0000.zip"} ]}
80 
        });
81 
 
82 
        //Vamos programar a mudança da variavel para mudar a lista de items
83 
        $(document).ready(function()
84 
        {
1577 jmachado 85 
            $("#ModeloBaseMsgInput").change(function()
1576 jmachado 86 
            {
1577 jmachado 87 
                var uploadedIncomingJson = JSON.parse($("#ModeloBaseMsgInput").val());
1576 jmachado 88 
 
89 
                angular.element($("#myApp1")).scope().files.uploadedFiles = uploadedIncomingJson.uploadedFiles;
90 
                //SEMPRE QUE SE ALTERA UM modulo de fora para dentro temos de invocar
91 
                // o $apply socre o scope para alterar a view
92 
                angular.element($("#myApp1")).scope().$apply();
93 
 
94 
            });
95 
        });
96 
    </script>
97 
 
98 
    </div>
99 
</div>
100 
 
101 
</body>
102 
</html>