如何使用选项json追加选择angularjs

Question

这段代码实际上没有附加功能，但是当我追加它时，我可以看到select，但里面唯一的数据是括号{{option1.nomcarac}}

我想追加并接受我的选择，看起来很容易但是今天杀死了我的大脑

Answer 1

您的问题的解决方案是：

var elem = angular.element("<select><option ng-repeat='option in options1' 
value='option1.nomcarac'>{{option.nomcarac}}</option></select>");
 $(".testo").append($compile(elem)($scope));

此处有以下内容的链接：https://plnkr.co/edit/lotJ3ndRIGDp5pQqqKH0?p=preview

但是你不应该遵循这种jquery方法来动态地将字段添加到角形式中。您可以做的是在输入字段上进行ng-repeat，您希望动态添加任意次数，并为这些动态创建的输入的模型值提供输入数组。所以你可以做到这一点：

<div ng-repeat="item in selects">
    <select ng-model="item.value"><option ng-repeat='option1 in options1' 
     value='{{option1.nomcarac}}' >{{option1.nomcarac}}</option></select>
    <button ng-click="getValue(item)">get input value</button>
</div>

在控制器中有如下功能：

$scope.addSelectItem = function(){
    fieldname = "Field " + count;
    $scope.selects.push({name: fieldname});
    count++;
}

您可以为另一种输入字段添加另一个ng-repeat。因此，通过这种方式，字段将更加干净地添加。 示例：https://plnkr.co/edit/nptQEOOxt7cAmHJ2sT30?p=preview

Answer 2

  

如果您的HTML字符串包含角度表达式，那么您需要   使用$ compile。

根据$compile服务的Angular官方文档。编译服务是：

  

将HTML字符串或DOM编译为模板并生成模板   函数，然后可用于链接范围和模板   在一起。

HTML：

<div ng-controller="DemoController">
  <dynamic-element selectOption='htmlString'></dynamic-element>
</div>

指令：

(function(){
"use strict";
angular.module("CompileDirective", [])
  .directive('dynamicElement', ['$compile', function ($compile) {
      return { 
        restrict: 'E', 
        scope: {
            selectOption: "="
        },
        replace: true,
        link: function(scope, element, attrs) {
            var template = $compile(scope.selectOption)(scope);
            element.replaceWith(template);               
        }
      }
  }])
  .controller("DemoController", ["$scope", function($scope){
      $scope.htmlString = '<select><option ng-repeat='option1 in options1' 
value='option1.nomcarac'>{{option1.nomcarac}}</option></select>';
  }])

}());