Question

我有这个HTML代码

<div class="input-group">
          <input type="number" class="form-control" name="distance" ng-model="calculatorData.distance" placeholder="Distancia"  required>
          <div class="input-group-btn">
              <button type="button" class="btn dropdown-toggle btn-default" data-toggle="dropdown" href="#">
                <span id="distance_unity_text">Kilometros</span> <span class="caret"></span>
                <input type="hidden" name="distance_unity" ng-model="calculatorData.distance_unity" value="km">
              </button>
              <ul class="dropdown-menu" role="menu">
                <li> <a data-value="km" href="#">Kilometros</a></li>
                <li> <a data-value="m"  href="#">Metros</a></li>
                <li> <a data-value="mi" href="#">Millas</a></li>
              </ul>
          </div><!-- /input-group-btn -->
        </div><!-- /input-group -->

和这个jquery代码

$(document).ready(function(e){
   $(".dropdown-menu li a").click(function(){
    var $target = $( event.currentTarget ).closest('.input-group-btn');
    var selText = $(this).text();
    var selValue =  $(this).attr('data-value');
    $target.find("input[name=distance_unity]").val(selValue);
    $target.find("#distance_unity_text").text(selText);

    });
});

在这里查看http://jsfiddle.net/asj8x/

好的，这段代码有效，但现在我尝试实现angularjs

我无法将所选选项的值绑定到angularjs calculatorData.distance_unity的模型

我会尝试使用选择或下拉列表，但会破坏组输入的样式

Answer 1

部分解决方案是直接在控制器中获取值

.controller('utilityController', function($scope, $http, Utility) {
$scope.calculatorData = {};

$scope.loading = false;

$scope.calculateData = function() {
    $scope.loading = true;
    $scope.calculatorData.distance_unity = $("input[name=distance_unity]").val(); //get the hidden value

    Utility.save($scope.calculatorData)
        .success(function(data) {

bootstrap 3 + angularjs并选择hack

1 个答案: