Angular - 添加选项以使用Jquery进行选择

Question

我有一个指令,为select 添加新选项.

为此我正在使用:

let opt: any = angular.element(
            '<option value="' + opcion.valor + '">' + opcion.texto + '</option>'
          );
          this.element.append(this.$compile(opt)(scope));

我不想使用模板,因为我不想要新的范围.

选项将添加到视图的列表中.但是当我选择其中一些时,选择的ng模型不会更新.它的值为null.

如何使用新选项值进行角度刷新？

这是一个codepen示例:选择选项X不会反映在模型上.

奇怪的是,如果我链接到角1.5.9,它的工作原理,但从角1.6.0开始它没有.

https://codepen.io/anon/pen/XemqGb?editors=0010

Answer 1

如何使用新选项值进行角度刷新？

你不需要这样做.更新model并data binding通过完成digestcicle.

Data binding意味着当您在视图中更改某些内容时,范围模型会自动更新.

您只需要更新范围,并且digestcicle正在处理其余的工作.

我建议你不要混合jquery使用angularJS.

你一定要尝试做的事情angular时,方式可能不过.

你不应该在AngularJS的顶部使用jQuery,因为如果我们使用任何角度DOM操作或范围变量操作,AngularJS循环将不会运行. digestJQuery

但是,您可以通过传递函数manually使用$scope.$apply()方法来执行此操作callback.

HTML

<select ng-model="selectedValue">
  ....
</select>

JS

$('select').change(function(){
    var value = $(this).val();
    var selectScope = angular.element($("select")).scope();
    selectScope.$apply(function(){
        selectScope.selectedValue=value;
    });
});

Answer 2

我想为select添加新选项,但不使用指令的新模板

compile在指令中使用属性:

myApp.directive('myList', function() {
   return {
        restrict: 'EA', //E = element, A = attribute, C = class, M = comment
         link: function ($scope, element, attrs) {
             // ....
        }, //DOM manipulation
         compile: function(tElement, tAttrs) {
           tElement.append('<option value="10">Option Ten</option>');
        }
      }
  });

Updated Demo Codepen

[编辑1]

在外部模型字段更改后可以执行此操作吗？观看一个字段,然后添加选项？

一点也不.compile在我们创建实例后立即调用.这是Angularjs编译指令的阶段

但是,如果您想在基于外部流量的延迟之后创建值,为什么不使用ng-options- 您只需要将新值添加到对象列表中并ng-options为您完成工作:

Simple Example Fiddle

$scope.items = [
    { value: "C", name: "Process C" },
    { value: "Q", name: "Process Q" }
];
 $timeout(function(){
    $scope.items.push({ value: "New", name: "Process New" });
 },3000);

和HTML:

<select class="form-control" name="theModel" ng-model="theModel" 
        ng-options="c.value as c.name for c in items">
    <option value=""> -- </option>
  </select>

Answer 3

在最新的 AngularJS 中，选择值（从 DOM 读取）经过验证

最好以标准方式使用 select，

顺便说一句 - 如果您确实需要这个，请通过selectDirective如下装饰来删除验证

代码笔：https ://codepen.io/anon/pen/NapVwN?editors=1010#anon-login

myApp.decorator('selectDirective', function($delegate) {
    let originalCtrl = $delegate[0].controller.pop();
    $delegate[0].controller.push(function() {
      originalCtrl.apply(this, arguments);
      this.hasOption = function() { 
        return true; 
      }
    })
    return $delegate;
});