Using angular.js 's data-binding in javascript /or updating javascript variable on event

Question

I just started using angular.js, and it is pretty useful. I have searched a lot maybe with wrong keywords, but I wasn't able to find how to use angular.js's Data Binding in javascipt.

Here is the sample of the problem:

<form><select ng-model="frfiSzam" id="frfi-szam">
      <option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option> <option>11</option><option>12</option><option>13</option><option>14</option><option>15</option>
    </select></form>

    <div class="leir">

     <p class="fejl">{{frfiSzam}} férfi résztvevő</p>


     <script type="text/javascript"> 

    var x= '{{frfiSzam}}'
    var char = '';
    while (x--) {
        char += 'Hi!';
    }
    // write once
    document.write(char);

     </script>

So the thing is working ( the first part) except this one var x= '{{frfiSzam}}'. If I set it to a constant the code is working fine, so I think I need to update my x variable when the drop down value changes, but I do not know how to do it so the code works.

Thanks a lot!

mb21 · Accepted Answer · 2013-01-29 08:45:19Z

2

You are looking for a watch: http://jsfiddle.net/6QG9r/

$scope.$watch('number', function(newValue, oldValue) {
    //this callback function gets executed whenever 'number' changes
    var x = newValue;
    $scope.hi = "";
    while (x--) {
        $scope.hi += "Hi! ";
    }
});

answered Jan 29, 2013 at 8:45

mb21

40.1k8 gold badges129 silver badges157 bronze badges

wow! thanks a lot! how can i do the same with some html elements with classes? $scope.hi += "<p class="sads"></p>";

GeriTol
– GeriTol

01/29/2013 09:30:50
Commented Jan 29, 2013 at 9:30
You'll have to learn to think a bit different with angular ;) i.e. DON'T write HTML with document.write() Instead, bind the information to a variable like $scope.hi and make use of it in the HTML template like <span ng-bind="hi"></span> This works also for arrays: jsfiddle.net/dakra/U3pVM btw, I really recommend docs.angularjs.org/tutorial And if my answer solved your problem, please accept it :)

mb21
– mb21

01/29/2013 10:10:51
Commented Jan 29, 2013 at 10:10
there seems to be a way: stackoverflow.com/questions/9381926/… but it's not the way angular is meant to be used. put your stuff in an array and then use docs.angularjs.org/api/ng.directive:ngRepeat

mb21
– mb21

01/29/2013 10:52:24
Commented Jan 29, 2013 at 10:52
<div ng-bind-html-unsafe="hi"></div> solved the problem!! thank you very much! :)

GeriTol
– GeriTol

01/29/2013 11:05:29
Commented Jan 29, 2013 at 11:05

Add a comment |

Collectives™ on Stack Overflow

Using angular.js 's data-binding in javascript /or updating javascript variable on event

1 Answer 1

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Linked

Related