В первой и второй частях этой серии мы сосредоточились на контроллерах и директивах AngularJS. В этой части мы сосредоточимся на двухсторонней привязке данных AngularJS.
Связывание данных в AngularJS
Привязка данных Angular позволяет автоматически отражать изменения в модели и наоборот. Подробное объяснение привязки данных AngularJS можно найти здесь .
Мы добавим несколько функций в наше приложение для визуализации. Сначала мы добавим выпадающий список, в котором мы можем выбрать тип графика. Давайте добавим несколько диаграмм в раскрывающемся списке. Откройте index.html и добавьте элемент select как показано ниже:
<select id="chartType"></select>
Если мы хотим, мы можем определить параметры для раскрывающегося списка только в HTML, но давайте сделаем это угловым способом. Откройте файл controllers.js и определите параметры, как показано ниже.
$scope.chartTypes = [ {typeName: 'PieChart', typeValue: 'PieChart'}, {typeName: 'BarChart', typeValue: 'BarChart'}, {typeName: 'ScatterChart', typeValue: 'ScatterChart'}, {typeName: 'LineChart', typeValue: 'LineChart'} ]; $scope.chartType = $scope.chartTypes[0];
Теперь controllers.js выглядит так:
'use strict'; /* Controllers */ google.load('visualization', '1', {packages: ['corechart']}); google.setOnLoadCallback(function() { angular.bootstrap(document.body, ['myApp']); }); angular.module('myApp.controllers', []). controller('MyCtrl1', ['$scope',function($scope) { var data = google.visualization.arrayToDataTable([ ['Year', 'Sales', 'Expenses'], ['2004', 1000, 400], ['2005', 1170, 460], ['2006', 660, 1120], ['2007', 1030, 540] ]); var options = { title: 'Company Performance' }; var chart = {}; chart.data = data; chart.options = options; $scope.chartTypes = [ {typeName: 'LineChart', typeValue: '1'}, {typeName: 'BarChart', typeValue: '2'}, {typeName: 'ColumnChart', typeValue: '3'}, {typeName: 'PieChart', typeValue: '4'} ]; $scope.chartType = $scope.chartTypes[0]; $scope.chart = chart; }]) .controller('MyCtrl2', [function() { }]);
Теперь нам нужно привязать chartTypes к выпадающему. В AngularJS мы можем привязать параметры к раскрывающемуся списку, используя ngOptions . Нам также нужно привязать chartType к выбранному значению в выпадающем меню, и для этого мы используем ngModel . Итак, добавьте атрибуты с именами ng-options и ng-model в выпадающий список, как показано ниже.
<select id="chartType" ng-model="chartType" ng-options="c.typeName for c in chartTypes"> </select>
chartTypes ng-options перебирают значения в chartTypes и привязывают каждое typeName к раскрывающемуся typeName . Перед запуском сервера узлов нам нужно изменить значение ng-controller , чтобы оно было присоединено к элементу body . Полученный файл index.html показан ниже.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>My AngularJS App</title> <link rel="stylesheet" href="css/app.css" /> <script type="text/javascript" src="https://www.google.com/jsapi"></script> </head> <body ng-controller="MyCtrl1"> <div g-chart></div> <select id="chartType" ng-model="chartType" ng-options="c.typeName for c in chartTypes"> </select> <div>Angular seed app: v<span app-version></span></div> <script src="lib/angular/angular.js"></script> <script src="lib/angular/angular-route.js"></script> <script src="js/app.js"></script> <script src="js/services.js"></script> <script src="js/controllers.js"></script> <script src="js/filters.js"></script> <script src="js/directives.js"></script> </body> </html>
Затем запустите сервер узла, используя следующую команду.
node scripts/web-server.js
Перейдя по http://localhost:8000/app/index.html вы увидите предварительно заполненный выпадающий список.
Изменение типа диаграммы
Мы будем использовать ngChange для рендеринга нашего графика на основе раздела в выпадающем списке. Внутри controllers.js определяется другая переменная $scope как показано ниже.
$scope.selectType = function(type) { $scope.chart.type = type.typeValue; }
Мы также хотим установить тип диаграммы по умолчанию:
chart.type = $scope.chartTypes[0].typeValue;
После добавления ng-change к элементу select это должно выглядеть так:
<select id="chartType" ng-change="selectType(chartType)" ng-model="chartType" ng-options="c.typeName for c in chartTypes"> </select>
Изменение типа диаграммы приводит к $scope.chart.type переменной $scope.chart.type scope.chart.type. Это изменение следует отслеживать, чтобы график изменился соответствующим образом. Для этого у нас есть нечто, называемое $scope.$watch , которое отслеживает изменение в $scope . В directives.js оберните link обратным вызовом внутри $scope.$watch как показано ниже.
link: function($scope, elm, attrs) { $scope.$watch('chart', function() { var chart = new google.visualization.LineChart(elm[0]); chart.draw($scope.chart.data, $scope.chart.options); }, true); }
Это изменение приводит к тому, что каждое изменение в $scope.chart вызывает функцию обратного вызова. Внутри функции обратного вызова $scope.$watch нам нужно проверить наличие $scope.chart.type и соответственно создать объект диаграммы. Измените директиву gChart в directives.js как показано ниже.
.directive('gChart',function() { return { restrict: 'A', link: function($scope, elm, attrs) { $scope.$watch('chart', function() { var type = $scope.chart.type; var chart = ''; if (type == '1') { chart = new google.visualization.LineChart(elm[0]); } else if (type == '2') { chart = new google.visualization.BarChart(elm[0]); } else if (type == '3') { chart = new google.visualization.ColumnChart(elm[0]); } else if (type == '4') { chart = new google.visualization.PieChart(elm[0]); } chart.draw($scope.chart.data, $scope.chart.options); },true); } }; });
Теперь, когда вы выбираете другой тип диаграммы из выпадающего списка, диаграмма обновляется.
Вывод
В этом руководстве мы реализовали выпадающий список и связали его с помощью двусторонней привязки данных Angular. В нашем следующем уроке мы сосредоточимся на добавлении некоторых дополнительных функций и загрузке приложения, чтобы оно выглядело хорошо. В то же время код доступен на GitHub , а живая демонстрация размещена на Heroku .