Angular Span update event

Question

I have a set of code which update the span dynamically.

<div id="ddlType" class="dropdown ddWrap">
    <div data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <span class="icon 1Icon"></span> <span class="dseleced">span</span>
        <span class="caret pull-right"></span>
    </div>
    <ul class="dropdown-menu" aria-labelledby="dLabel">
         <li data-value="1"><a href="#"><span class="iconDD 1Icon"></span> type 1</a></li>
         <li data-value="2"><a href="#"><span class="iconDD 2Icon"></span> type 2</a></li>
         <li data-value="3"><a href="#"><span class="iconDD 3Icon"></span> type 3</a></li>
         <li data-value="4"><a href="#"><span class="iconDD 4Icon"></span> type 4</a></li>
    </ul>
</div>

when user select li it update '.dseleced' span with value class ,and data-value, then after I need to update in db

Thank

Is it required as I need to know way to track span update event — Md. Parvez Alam, Jun 05 '17 at 05:59
As you have written code in jQuery so you can manipulate and check dropdown types in the `click` event. — Rohan Kumar, Jun 05 '17 at 06:01
Why can this __not__ be achieved using pure Angular way? Have you event tried once? — Satpal, Jun 05 '17 at 06:11
You can use angular directives like ng-click, ng-change and also you can share your html code for better answers — hasan, Jun 05 '17 at 06:12
@Satpal I have little knowledge of angular, so I did that in Jquery — Md. Parvez Alam, Jun 05 '17 at 06:17
My project mainly using angular, so at time saving, I don't want to user jquery stuff — Md. Parvez Alam, Jun 05 '17 at 06:18
I would recommend you to share you actual problem may be we can suggest you a better approach. I will suggest you to read https://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background — Satpal, Jun 05 '17 at 06:32

score 0 · Answer 1 · answered Jun 05 '17 at 08:05

Try this,

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.dvalue = "";
    $scope.updateDValue = function(ths){
      $scope.dvalue=ths.target.parentNode.getAttribute('data-value');
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
  <div id="ddlType" class="dropdown ddWrap">
    <div data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      <span class="icon 1Icon"></span> <span class="dseleced {{dvalue}}" data-value="{{dvalue}}">span {{dvalue}}</span>
      <span class="caret pull-right"></span>
    </div>
    <ul class="dropdown-menu" aria-labelledby="dLabel">
      <li data-value="1"><a href="#" ng-click="updateDValue($event)"><span class="iconDD 1Icon"></span> type 1</a></li>
      <li data-value="2"><a href="#" ng-click="updateDValue($event)"><span class="iconDD 2Icon"></span> type 2</a></li>
      <li data-value="3"><a href="#" ng-click="updateDValue($event)"><span class="iconDD 3Icon"></span> type 3</a></li>
      <li data-value="4"><a href="#" ng-click="updateDValue($event)"><span class="iconDD 4Icon"></span> type 4</a></li>
    </ul>
  </div>
</div>

Angular Span update event

1 Answers1