How can I change the CSS property of multiple input field using multiple ng-app in HTML?

Question

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

<p>Change the value of the input field:</p>
<div ng-app="" ng-init="myCol=''">
<input style="background-color:{{myCol}}" ng-model="myCol">
</div>

<div id="secondApp" ng-init="myCo=''">
<input style="background-color:{{myCo}}" ng-model="myCo">
</div>
<p>AngularJS resolves the expression and returns the result.</p>
<p>The background color of the input box will be whatever you write in the input field.</p>
<script type="text/javascript">
 var secondDiv = document.getElementById('secondApp');  
 angular.element(document).ready(function() {  
          angular.bootstrap(secondDiv, [ 'secondApp' ]);  
   });
</script>
</body>
</html>

Here is my code. The first input field works perfectly but the second input field is not working even I use bootstrap. Please anyone show me the right way to do it. Thanks

score 0 · Answer 1 · answered Feb 15 '19 at 05:17

0

This question already had an answer:

bootstrap to use multiple ng-app

Please refer and make changes to your code accordingly.

answered Feb 15 '19 at 05:17

Ajinkya

325
3
12

thanks for giving response.. but i tried but i could not able to understand from there how can i use them in my input style ? will u pls edit my code? – Ravi Kadyan Feb 15 '19 at 05:22
answer given by @Akber Iqbal is what I am trying to say :-) – Ajinkya Feb 15 '19 at 05:35
@Ravi Kadyan you can close this question now. – Ajinkya Feb 15 '19 at 05:39
i m sorry brother i,am new here how can i close it? – Ravi Kadyan Feb 15 '19 at 05:42
1

Sorry, you cant Close your question now because some reputations require for closing the question. – Ajinkya Feb 15 '19 at 05:50
You marked the question as answered to indicate that you're satisfied with the answer .... that's also enough... :-) – Ajinkya Feb 15 '19 at 05:52
Welcome @Ravi Kadyan ... You can mark answer by me as well it is a general Work Around for solving these kinds of issue. – Ajinkya Feb 15 '19 at 07:14

score 0 · Accepted Answer · answered Feb 15 '19 at 05:26

Ajinkya pointed you in the right direction... going on from there:

var firstApp = angular.module("firstApp", []);
var secondApp = angular.module("secondApp", []);

firstApp.controller("faController", function($scope) {});
secondApp.controller("saController", function($scope) {});

angular.element(document).ready(function() {
  angular.bootstrap(document.getElementById("firstApp"), ['firstApp']);
  angular.bootstrap(document.getElementById("secondApp"), ['secondApp']);
});

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

<p>Change the value of the input field:</p>
<div id="firstApp" ng-controller="faController" ng-init="myCol='lightblue'">
  <input style="background-color:{{myCol}}" ng-model="myCol">
</div>

<div id="secondApp" ng-controller="saController" ng-init="myColor2='lightpink'">
  <input style="background-color:{{myColor2}}" ng-model="myColor2">
</div>

<p>AngularJS resolves the expression and returns the result.</p>
<p>The background color of the input box will be whatever you write in the input field.</p>

How can I change the CSS property of multiple input field using multiple ng-app in HTML?

2 Answers2