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

<!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--从文本框中获取值并将其用于身体背景。文本框的值应该在邮件变量进行同步，所以，当按钮被点击的值应该被用作身体背景颜色请帮助Angular JS--从文本框中获取价值并将其用于身体背景

来源

2017-06-14 Mano

您应该添加NG模式为十六进制颜色:) – Disfigure

从{{mail}}

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

来源

2017-06-14 07:05:05 aseferov

感谢兄弟..它的工作并有其他错误也.. – Mano

在扩展该计划，我想要一个单独功能和里面它我想改变颜色 – Mano

删除大括号作为@aseferov所述去除大括号。如果你想确保它是文本框中的颜色，只需在你的输入中添加一个ng-pattern指令来执行验证。只有当给定值通过ng-pattern可信时，该值才会更新。

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

来源

2017-06-14 07:08:55 Disfigure

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

来源

2017-06-14 07:16:42 Mano

这是纠正的代码 – Mano

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

回答

相关问题