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

Question

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

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!

javascript
html
drop-down-menu
angularjs

Answer 1

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! ";
    }
});