Question

所以我在这个方面做了两件事：https：//jsfiddle.net/cicerohellmann/Lt8gju19/ 在html中我调用它并且它有效。＆lt; select ng-model =“ampm”ng-options =“item.friendName for options in items [1]”＆gt;＆lt; / select＆gt; 上午/下午：{{ampm}} 使用javascript追加不起作用。 html = “＆lt; select ng-model ='ampm' ng-options ='item.friendName for options in [1]' class ='ng-pristine ng-valid'＆gt;＆lt; / select＆gt;“; div = document.getElementById（'test'）; div.insertAdjacentHTML（'beforeend'，html）; 我正在使用这些数据进行测试： $ scope.options = [ [{ “friendName”：“Escobar”， “点”：“200” }，{ “friendName”：“Pedro”， “点”：“200” }]， [{ “friendName”：“西塞罗”， “点”：“200” }，{ “friendName”：“Ciclano”， “点”：“200” }]， [{ “friendName”：“Jeremias”， “点”：“200” }，{ “friendName”：“Boça”， “点”：“200” }]， [{ “friendName”：“Leite com pera”， “点”：“200” }，{ “friendName”：“Rato borrachudo”， “点”：“200” }] ]。我试了两天，研究了这个案子，没什么。我也没有得到任何错误。我真的需要这个组合，因为每个下拉列表都将动态创建，那里的数字也将动态设置但是，当然，任何更好的建议，然后我这样做的方式将不胜感激。

Answer 1

我实际上正在更新这个小提琴，我会发布完整而好的方法来做到这一点。但是，就目前而言，这是我的答案：

<强> Html5的

<div id="bob" ng-app ng-controller="MyCtrl">
  <select ng-model="ampm" ng-options="item.friendName for item in options[1]"></select>
  AM/PM: {{ampm}}
  <button ng-click="changeTopics()">Change</button>
  <button ng-click="click()"></button>

</div>

<强>的Javascript

function MyCtrl($scope, $compile) {
        var selectElement = angular.element("<select ng-model='ampm' ng-options='item.friendName for item in options[1]' class='ng-pristine ng-valid'></select>");

        var integer = 0;

        $scope.click = function(){

     selectElement = angular.element("<select ng-model=\"test"+ integer +"\"  ng-options=\"item.friendName for item in options[" + integer + "]\" class='ng-pristine ng-valid'></select>");

      htmlDiv = "<div id=\"test"+ integer +"\"></div>"

       var string ='test'+integer;

        console.log(integer);

    div = document.getElementById('bob');

    div.insertAdjacentHTML('beforeend', htmlDiv);

    angular.element(document.getElementById('test'+integer)).append(selectElement);

    integer++;

    $compile(selectElement)($scope);
    }

    function removeElement(element) {
    element && element.parentNode && element.parentNode.removeChild(element);
}


    $scope.changeTopics = function(){

        removeElement( document.getElementById("test"+ (integer-1)) );
    delete $scope.options.splice(integer,1);
        if(integer>0)
        integer--;
            console.log(integer);

    }
    $scope.ampm = 0;
    $scope.options = [
        [{
            "friendName": "Escobar",
            "points": "200"
        }, {
            "friendName": "Pedro",
            "points": "200"
        }],
        [{
            "friendName": "Cicero",
            "points": "200"
        }, {
            "friendName": "Ciclano",
            "points": "200"
        }],
        [{
            "friendName": "Jeremias",
            "points": "200"
        }, {
            "friendName": "Boça",
            "points": "200"
        }],
        [{
            "friendName": "Leite com pera",
            "points": "200"
        }, {
            "friendName": "Rato borrachudo",
            "points": "200"
        }]
    ];

}

Fiddle

我得到了朋友的帮助，发现了$ compile。感谢。

使用带有insertAdjacentHTML和ng-options的javascript添加<select>时的空下拉列表

1 个答案: