我有一组动态更新范围的代码。
<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
中更新感谢
答案 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>