AngularJS Example:

Watcher on dataset_wc

by sathish panduga p

HTML

<div ng-app>
<div ng-controller="rdCtrl">
   <div id="tags" style="border:none;width:370px;margin-left:300px;">
                    <span class="tag" style="padding:10px;background-color:#808080;margin-left:10px;margin-right:10px;" id="4"></span>
                    <div>
                        <input type="text" style="margin-left:-5px;" id="inptags" value="" placeholder="Add ur 5 main categories (enter ,)" />
                        <img src="../../../static/app/img/accept.png" ng-click="assign()" id="assign" style="cursor:pointer;display:none" />
                    </div>
           </div>


    <div id="status"></div>
  </div>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

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

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js" type="text/javascript"></script>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />

JavaScript

$(document).ready(function () {
                $(".tag:empty").each(function () {
                    $(this).remove(); // this references the current element in the iteration
                });
        });


function rdCtrl($scope) {
  
            $scope.dataset_v1 = {};
            $scope.dataset_wc = {};
            $scope.$watch('dataset_wc', function (newVal) {
                //alert('columns changed :: ' + JSON.stringify($scope.dataset_wc, null, 2));
                $('#status').html(JSON.stringify($scope.dataset_wc));

            }, true);

            $(function () {
                $('#tags input').on('focusout', function () {
                    var txt = this.value.replace(/[^a-zA-Z0-9\+\-\.\#]/g, ''); // allowed characters
                    if (txt) {
                        alert(txt);
                        $(this).before('<span class="tag">' + txt.toLowerCase() + '</span>');
                        var div = $("#tags");
                        var spans = div.find("span");
                        spans.each(function (i, elem) { // loop over each spans
                            $scope.dataset_v1["d" + i] = { // add the key for each object results in "d0, d1..n"
                                id: i, // gives the id as "0,1,2.....n"
                                name: $(elem).text(), // push the text of the span in the loop
                                value: 3
                            }
                        });
                        $("#assign").click();
                    }
                    this.value = "";
                }).on('keyup', function (e) {
                    // if: comma,enter (delimit more keyCodes with | pipe)
                    if (/(188|13)/.test(e.which)) $(this).focusout();
                    if ($('#tags span').length == 7) {
                        document.getElementById('inptags').style.display = 'none';
                    }
                });

                $('#tags').on('click', '.tag',...