角度跨度更新事件

时间:2017-06-05 05:56:49

标签: angularjs

我有一组动态更新范围的代码。

<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>

当用户选择li时,它会更新&#39; .dseleced&#39;使用值类和数据值,然后我需要在db

中更新

感谢

1 个答案:

答案 0 :(得分:0)

试试这个,

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>