Question

<!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--从文本框中获取值并将其用于正文背景。文本框值应该在邮件变量中同步，因此，在单击按钮时，该值应该用作主体背景颜色请帮助

Answer 1

从{{mail}}

删除大括号

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

Answer 2

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

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

Answer 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>

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

3 个答案: