AngularJS не связывается через HTML

#javascript #html #css #node.js #angularjs

#javascript #HTML #css #node.js #angularjs

Вопрос:

Я уже просматривал вопросы, связанные с этим, мой код правильный, как отвечено в предыдущем вопросе, тогда также не работает. Его очень простой код для начинающих

 <html ng-app="">
<head>
    <title>Assignment</title>
    <script src="‪js/angular.min.js" ></script>
    <style type="text/css">
        .body{
                background-color: red
        }
    </style>
</head>
<body>
    Enter name <input type="text" ng-model="color" name=""><br>
    Name : {{color}}

</body>
</html>

вывод:
введите имя : _______________
имя: {{цвет}}
Я не получаю значение, которое пытались сохранить в цвете.

Ответ №1:

Вам необходимо применить правильный синтаксис кода и структуру html. — особенно перенос кода в ng-app и ng-controller .

Обратите внимание, что вы можете применить цвет фона, когда пользователь вводит текст, и это изменит цвет фона основного текста, но ТОЛЬКО тогда, когда введенный текст соответствует значению, которое является распознанным цветом. Например: «red» сделает фон красным, но если вы удалите этот символ cahracter bey, а затем введите «blue», фон будет белым, когда слово не соответствует определенному цвету — например: red … re … r … b .. bl … blu … blue.

Было бы лучше использовать .blur() метод для изменения цвета фона, когда пользователь закончил печатать, а не введенный текст при нажатии клавиши. Вы все еще не уверены в правильности выбора цвета, поэтому было бы лучше использовать список выбора и определенный набор параметров для цветов. Даже тогда я бы использовал класс с требуемым стилем, чтобы добавить / удалить класс — например: body.red { background-color: red}; body.blue { background-color: blue};

Есть несколько способов изменить цвет фона, но эта демонстрация даст вам основы о том, как настроить ваше приложение AngularJS и как ссылаться на переменную $scope .

 <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport"
     content="width=device-width, initial-scale=1, user-scalable=yes">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>

  <script>
   angular.module('DemoApp', [])
   .controller('DemoController', ['$scope', function($scope) {
       $scope.color = "red";
   }]);

  </script>

</head>
<body ng-app="DemoApp" ng-controller="DemoController" ng-style="{'background-color': color}">

Enter name <input type="text" ng-model="color" name=""><br/>Name : {{color}}
</body>
</html>

1. большое спасибо, приятель, я попробовал этот код. это очень помогло в изучении, я также попробовал эту онлайн-ссылку, но она также не сработала. и это было что-то 1.8. Я не знаю, в чем проблема. Но еще раз большое вам спасибо.

2. Рад, что помог — спасибо, что приняли его — Удачи с вашим кодированием 🙂

Ответ №2:

Я нашел какой-то проводной символ перед js/

 <script src="‪js/angular.min.js" ></script>

это приводит к сбою импорта angularjs.

попробуйте повторно ввести URL-адрес или использовать официальный cdn.

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js" ></script>