dir.by  
  Поиск  
Программирование, разработка, тестирование
AngularJS (это Angular версии 1.0)
Примеры "Односторонняя привязка данных (показываем данные)" в AngularJS
  Посмотрели 4750 раз(а)    
 Примеры "Односторонняя привязка данных (показываем данные)" в AngularJS 
последнее обновление: 28 сентября 2019
Пример1 (одна переменная)
  Html  
<html>
<body>

     <!-- загружаем библиотеку AngularJS -->
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

     <!-- HTML элементы -->
     <div ng-app="myApp" ng-controller="myCtrl">
          My name is {{name}}
     </div>

     <!-- Java Script -->
     <script>
          // создаем AngularJS модуль с именем 'myApp'
          var app = angular.module('myApp', []);

          // создаем AngularJS контроллер с именем 'myCtrl'
          app.controller('myCtrl', function($scope) {
               $scope.name = "Evgen";
          });
     </script>

</body>
</html>
Пример смотрим, тестируем
Объяснение примера!
Сервис $scope в AngularJS следит за всеми изменениями.
Мы в $scope добавили переменную name
  Html  
<script>
     ...
     app.controller('myCtrl', function($scope) {
          $scope.name = "Evgen";
     });
</script>
HTML текст привязывается к name через двойные фигурные скобки {{...}}
  Html  
My name is {{name}}
Пример2 (две переменных)
  Html  
<html>
<body>

     <!-- загружаем библиотеку AngularJS -->
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

     <!-- HTML элементы -->
     <div ng-app="myApp" ng-controller="myCtrl">
          {{firstName + ' ' + lastName}}
     </div>

     <!-- Java Script -->
     <script>
          // создаем AngularJS модуль с именем 'myApp'
          var app = angular.module('myApp', []);

          // создаем AngularJS контроллер с именем 'myCtrl'
          app.controller('myCtrl', function($scope) {
               $scope.firstName = "Evgen";
               $scope.lastName = "AAA";
          });
     </script>

</body>
</html>
Пример смотрим, тестируем
 
← Предыдущая тема
Что такое AngularJS ?
 
Следующая тема →
Пример "двусторонняя привязка данных" ng-model в AngularJS
 
Ваши Отзывы ... комментарии ...
   
Вашe имя
Ваш комментарий (www ссылки может добавлять только залогиненный пользователь)

  Объявления  
  Объявления  
 
Что такое AngularJS ?
Примеры
Примеры "Односторонняя привязка данных (показываем данные)" в AngularJS
Пример "двусторонняя привязка данных" ng-model в AngularJS
Пример "Функция для обрабоки события и привязка к данным" ng-click в AngularJS
Дополнительные темы, вопросы
$scope в AngularJS
WWW сайты для изучения AngularJS
Сайты для изучения AngularJS

  Ваши вопросы присылайте по почте: info@dir.by  
Яндекс.Метрика