Angular - 使用 Jquery 添加选项到 select

Question

我有一个指令将 新选项 添加到 select。

为此，我正在使用：

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

我不想使用模板，因为我不想要新的范围。

选项已添加到视图的列表中。但是当我 select 其中一些时， select 的 ng-model 没有得到更新。它获得值 null.

如何使 angular 刷新为新的选项值？

这是一个代码笔示例：选择选项 X 不会反映在模型上。

奇怪的是，如果我 link 到 angular 1.5.9，它可以工作，但是从 angular 1.6.0 开始就不行了。

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

Answer 1

How can i make angular to refresh with the new option values ?

您不需要这样做。更新 model 和 data binding 由 digest cicle 完成。

Data binding 表示当您更改视图中的内容时，范围模型自动更新。

您只需更新您的 scope，digest cicle 会处理其余的工作。

我建议您不要将 jquery 与 angularJS 混合使用。

尽管可能，但您绝对应该尝试以 angular 的方式做事。

你不应该在 AngularJS 的顶部使用 jQuery，因为 AngularJS digest 如果我们使用 JQuery 进行任何 angular DOM 操作或范围变量操作，循环将不会运行 .

但是，您可以使用 $scope.$apply() 方法通过传递 callback 函数来完成 manually。

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

I want to add new options to the select but without using a new template for the directive

在指令中使用 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]

Is possible to do this after a change on external model field ? Watch a field and then add the option ?

完全没有。 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

最近angularJSSelect value (read from DOM) is validated

最好以标准方式使用 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;
});

Answer 4

其实你没理解的是数据绑定。这意味着当你在 $scope 中有东西时，你必须使用它。所以你的变量 $scope.opcion 必须是一个数组，因为它是一个 select。代码需要类似于：

/*
AngularJS Basic Directives

For More Examples AngularJS  

http://mehmetcanker.com

*/

var myApp = angular.module('example', []);

myApp.controller('MyCtrl',['$scope', function($scope) {
$scope.opcion = [1];
}])

 //This directive doesn't individual scope so
 //Controller and Directive share same scope
 myApp.directive('myList', function() {
   return {
        restrict: 'EA', //E = element, A = attribute, C = class, M = comment
        link: function ($scope, element, attrs) {
          // add options
          $scope.opcion.join(2);
        } //DOM manipulation
    }
  });

重要的部分是$scope.opcion = [1]和$scope.opcion.join(value)

Angular - 使用 Jquery 添加选项到 select

Angular - Add option to select using Jquery

html

javascript

jquery

angularjs

angularjs-directive