Script angular.js bug

**remib74** · 21/07/2015, 09h53

bonjour, je rencontre des difficultés avec ce script.
pouvez vous m'aider à y voir plus clair ?
je suis débutant en angular.js...
certaines caracteristiques de ce language m'echappe encore.
voici la page complète...

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html >
<head>
    <title>login form</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table, th , td  {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}
table tr:nth-child(odd) {
  background-color: #f1f1f1;
}
table tr:nth-child(even) {
  background-color: #ffffff;
}
</style>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
 
<body>
    <div ng-app="formExample" ng-controller="ExController" >
        <form name="form" class="simple-form" ng-submit="submitForm()" >
            <p><input type="text" name="login" value=""ng-model="user.name" ng-model-options="{ updateOn: 'blur' }"></p>
            <p><input type="password" name="password" value="" ng-model="user.pass" ></p>
            <p class="remember_me">
                <label>
                    <input type="checkbox" name="remember_me" id="remember_me">
                    Remember me on this computer
                </label>
            </p>
            <input type="button" ng-click="reset()" value="Reset" />
            <input type="submit" ng-click="update(user)" value="Save" />
        </form>
        <pre>form = {{ user.name}}</pre>
        <pre>master = {{user.pass}}</pre>
    </div>
    <div ng-app="myApp" ng-controller="customersCtrl">
        <table>
            <tr ng-repeat="x in names">
                <td>{{ x.Name}}</td>
                <td>{{ x.Country}}</td>
            </tr>
        </table>
    </div>
    <script>
        angular.module('formExample', [])
                .controller('ExController', ['$scope', function ($scope) {
 
 
                        $scope.master = {};
 
                        $scope.update = function (user) {
                            $scope.master = angular.copy(user);
                        };
 
                        $scope.reset = function () {
                            $scope.user = angular.copy($scope.master);
                        };
 
                        $scope.reset();
                    }]);
    </script> 
<script>
    
        angular.module('myApp', [])
       .controller('customersCtrl', function ($scope, $http) {
            $http.get("http://www.w3schools.com/angular/customers_mysql.php")
                    .success(function (response) {
                        $scope.names = response.records;
                    });
        });
    </script>
</body>
</html>

merci d'avance pour vos réponses

**remib74** · 21/07/2015, 10h29

Bonjour, apres quelques enormités de syntaxe et en m'etant un peu melanger les pinceaux sur l'utilisation de ng-app j'ai finalement un script qui fonctionne.
Pour ceux qui débutent comme moi ng-app est un appel unique de fonction donc pas besoin de creer deux ng-app il vaut mieux doubler les controleurs.
le code ci dessous bonne journée.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!DOCTYPE html>
<html >
    <head>
        <title>login form</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            table, th , td  {
                border: 1px solid grey;
                border-collapse: collapse;
                padding: 5px;
            }
            table tr:nth-child(odd) {
                background-color: #f1f1f1;
            }
            table tr:nth-child(even) {
                background-color: #ffffff;
            }
        </style>
        <script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    </head>
 
    <body ng-app="formExample" >
        <div ng-controller="ExController" >
            <form name="form" class="simple-form" ng-submit="submitForm()" >
                <p><input type="text" name="login" value=""ng-model="user.name" ng-model-options="{ updateOn: 'blur' }"></p>
                <p><input type="password" name="password" value="" ng-model="user.pass" ></p>
                <p class="remember_me">
                    <label>
                        <input type="checkbox" name="remember_me" id="remember_me">
                        Remember me on this computer
                    </label>
                </p>
                <input type="button" ng-click="reset()" value="Reset" />
                <input type="submit" ng-click="update(user)" value="Save" />
            </form>
            <pre>form = {{ user.name}}</pre>
            <pre>master = {{user.pass}}</pre>
        </div>
        <div ng-controller="customersCtrl">
            <table>
                <tr ng-repeat="x in names">
                    <td>{{ x.Name}}</td>
                    <td>{{ x.Country}}</td>
                </tr>
            </table>
        </div>
 
        <script>
            angular.module('formExample', [])
                    .controller('ExController', ['$scope', function ($scope) {
 
 
                            $scope.master = {};
 
                            $scope.update = function (user) {
                                $scope.master = angular.copy(user);
                            };
 
                            $scope.reset = function () {
                                $scope.user = angular.copy($scope.master);
                            };
 
                            $scope.reset();
                        }])
 
 
            .controller('customersCtrl', function ($scope, $http) {
                $http.get("http://www.w3schools.com/angular/customers_mysql.php")
                        .success(function (response) {
                            $scope.names = response.records;
                        });
            });
 
        </script> 
 
    </body>
</html>

Script angular.js bug

AngularJS

Discussions similaires

Partager

Partager