Angular JS——从文本框中获取值并将其用于正文背景答案

【问题标题】：Angular JS-- Get value from textbox and use it for body backgroundAngular JS——从文本框中获取值并将其用于正文背景
【发布时间】：2017-06-14 15:16:42
【问题描述】：

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link rel="stylesheet" href="D:\Mano\Angular\Ex1\styles.css">

<body ng-app="myApp" ng-style="bColor">
    <mano-directive>
    </mano-directive>

    <form name="myForm">
        Email:
        <input type="email" name="remail" ng-model="mail">
        <span ng-show="myForm.remail.$error.email">Enter valid email</span>
        <br>
        <br> Valid: {{myForm.remail.$valid}}
        <br> Dirty: {{myForm.remail.$dirty}}
        <br> Touched: {{myForm.remail.$touched}}
        <br> {{mail}}
        <input type="button" ng-click="bColor={'background-color':'{{mail}}'}" value="Change Background"><!--mail variable not giving result--`enter code here`>

    </form>


    <script src="D:\Mano\Angular\Ex1\myApp.js"></script>
    <script src="D:\Mano\Angular\Ex1\myCtrl.js"></script>
    <script src="D:\Mano\Angular\Ex1\myDir.js"></script>
</body>

</html>

Angular JS——从文本框中获取值并将其用于正文背景。文本框值应该在邮件变量中同步，因此，单击按钮时，该值应用作正文背景颜色请帮忙

【问题讨论】：

你应该为 HEX 颜色添加一个 ng-pattern :)

标签： angularjs

【解决方案1】：

从{{mail}}中删除花括号

ng-click="bColor={'background-color': mail}"

【讨论】：

在扩展这个程序时，我想要一个单独的函数，并在其中更改颜色

【解决方案2】：

正如@aseferov 所说，删除花括号。如果要确保这是文本框中的颜色，只需在输入中添加 ng-pattern 指令即可执行验证。只有通过 ng-pattern 信任给定值时，才会更新该值。

正则表达式：ng-pattern="/^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/"

【讨论】：

【解决方案3】：

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link rel="stylesheet" href="D:\Mano\Angular\Ex1\styles.css">

<body ng-app="myApp" ng-style="bColor">
    <mano-directive>
    </mano-directive>

    <form name="myForm">
        Email:
        <input type="text" name="remail" ng-model="dmail">
        <span ng-show="myForm.remail.$error.email">Enter valid email</span>
        <br>
        <br> Valid: {{myForm.remail.$valid}}
        <br> Dirty: {{myForm.remail.$dirty}}
        <br> Touched: {{myForm.remail.$touched}}
        <br>
        <p>{{dmail}}</p>
        <input type="button" ng-click="bColor={'background-color':dmail}" value="Change Background">

    </form>


    <script src="D:\Mano\Angular\Ex1\myApp.js"></script>
    <script src="D:\Mano\Angular\Ex1\myCtrl.js"></script>
    <script src="D:\Mano\Angular\Ex1\myDir.js"></script>
</body>

</html>

【讨论】：