Question

我的目标很简单，就是在使用JQuery更新其值后，能够更新我绑定的模型。我正在使用一些相当固定的遗留代码，所以我无法用老式的角度方式做到这一点（见下文）。

非常重要：我无法在选择字段中使用ng-repeat，ng-options。选项的值与相应的ID相关联 - 我无法更改该数据的格式。如有必要，我可以为这些元素添加新指令。我提前为这些限制道歉..

以下是我现在所拥有的：

HTML

<select id="animalSelection" ng-change="forceApply(my.animal)">
  <option value="1">Dog</option>
  <option value="2">Cat</option>
  <option value="3">Zebra</option>
</select>

<input type="hidden" id="animalSelected" ng-model="my.animal" />

<h1>Selected Animal: {{my.animal}}</h1>

JS

// Get text of selected option
var animal = $("#animalSelection option:selected").text();

// Updates hidden input with ng-model attribute
$("#animalSelected").val(animal);

控制器功能：

// I know this part is for sure wrong.. really needs help

$scope.forceApply = function(applymodel){
   $scope.$apply(applymodel);
}

Answer 1

您可以为此创建自定义指令：

<强>角

app.directive('myChange', function () {
  return {
    restrict: 'A',
    scope: {
      //the ng-model you want to modify
      myModel: '=' 
    },
    link: function (scope, ele) {
      // sets first value on load
      scope.myModel = ele.find(':first').text();
      ele.bind('change', function () {
        // applies scope change
        scope.myModel = ele.find(':selected').text();
        scope.$apply();
      });
    }
  }
});

<强> HTML

<select id="animalSelection" data-my-model="my.animal" data-my-change>
  <option value="1">Dog</option>
  <option value="2">Cat</option>
  <option value="3">Zebra</option>
</select>

<input type="hidden" id="animalSelected" ng-model="my.animal" />

<h1>Selected Animal: {{my.animal}}</h1>

plunkr： http://plnkr.co/edit/Z8tWQHDJWtPN6Yrjwu3a?p=preview

使用ng-change更新角度模型

1 个答案: