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--從文本框中獲取價值並將其用於身體背景

回答

相關問題