Хобрук: Ваш путь к мастерству в программировании

Как установить значение элемента в Angular.js

Почему я не могу сделать это в Angular.js:

document.getElementById('divid').value = 'Change Text to This';

И каков «правильный» (Angular) способ сделать это?

javascript frontend angularjs
01.08.2014

Ответы:


1

В Angular вы используете директиву ng-model для создания двусторонней привязки данных между вашей моделью (т. е. переменной JS) и представлением (т. е. <div>). По сути, это означает, что всякий раз, когда вы меняете данные в представлении (например, посредством ввода), это изменение будет отражаться в вашей переменной JS. Смотри ниже:

HTML:

<html ng-app="myApp">
    <div ng-controller="MyCtrl">
        <div>{{myVariable}}</div>
        <input type="text" ng-model="myVariable" />
    </div>
</html>

JS:

/* App global module */
var myApp = angular.module('myApp');

/* Define controller to process data from your view */
myApp.controller('MyCtrl', function($scope) {

   $scope.myVariable = "initialValue"; // this is the variable that corresponds to text inserted in your input

});

Здесь myVariable будет иметь «initialValue» в качестве начального значения. Любые дальнейшие изменения ввода перезапишут значение этой переменной.

Также обратите внимание, что {{myVariable}} вводит переменную данных в ваш div. Когда вы меняете значение на входе, текст div также будет изменен.

01.08.2014

2

Вам нужно будет привязать контроллер к вашей разметке и инициализировать приложение Angular.

<div ng-app="myApp">
    <div id="divid" ng-controller="valueController">{{value}}</div>
</div>

Затем вы можете просто определить переменную области видимости в своем контроллере.

myApp.controller("valueController", function($scope) {
    $scope.value = "Hi!";
});

Лучше всего использовать директиву ng-app в HTML-теге страницы.

jsFiddle

01.08.2014
Новые материалы
Основы принципов S.O.L.I.D, Javascript, Git и NoSQL
каковы принципы S.O.L.I.D? Принципы SOLID призваны помочь разработчикам создавать надежные, удобные в сопровождении приложения. мы видим пять ключевых принципов. Принципы SOLID были разработаны..
Как настроить Selenium в проекте Angular
Угловой | Селен Как настроить Selenium в проекте Angular Держите свое приложение Angular и тесты Selenium в одной рабочей области и запускайте их с помощью Mocha. В этой статье мы..
Аргументы прогрессивного улучшения почти всегда упускают суть
В наши дни в кругах веб-разработчиков много болтают о Progressive Enhancement — PE, но на самом деле почти все аргументы с обеих сторон упускают самую фундаментальную причину, по которой PE..
Введение в Джанго Фреймворк
Схема «работать умно, а не усердно» В этой и последующих статьях я познакомлю вас с тем, что такое фреймворк Django и как создать свое первое приложение с помощью простых и понятных шагов, а..
Настольный ПК как «одно кольцо, чтобы править всеми» домашних компьютеров
Вид после 9 месяцев использования С настольных компьютеров все началось, но в какой-то момент они стали «серверами», и мы все перешли на ноутбуки. В прошлом году я столкнулся с идеей настольных..
Расширенные методы безопасности для VueJS: реализация аутентификации без пароля
Руководство, которое поможет вам создавать безопасные приложения в долгосрочной перспективе Безопасность приложений часто упускается из виду в процессе разработки, потому что основная..
стройный-i18следующий
Представляем стройную оболочку для i18next. Эта библиотека, основанная на i18next, заключает экземпляр i18next в хранилище svelte и отслеживает события i18next, такие как languageChanged,..