Question

我需要根据使用$http.get从服务器返回的内容动态生成html。我面临的问题是使用ngChange定义的onchange事件不会触发select。

下面是角度代码 -

var appModule = angular.module('frameworkModule',['ngRoute', 'ngGrid']); 

appModule.controller('homeController', 
            ['$scope', 'valuesService', '$http', '$templateCache', 
            function ($scope, valuesService, $http, $templateCache) {

       getData();
       function getData() {
            $http.get('/api/values').success(function (item) {
                var element = $("#filters-div");
                var select = item.Name + "<select id='" + item.id + "' ng-change='valueChanged(this)'>";
                    for (var j = 0; j < item.Values.length; j++) {
                        var optionValue = item.Values[j].ID;
                        var optionText = item.Values[j].Name;
                        select += "<option value='" + optionValue + "'>" + optionText + "</option>";
                    }
                    select += "</select>";
            $templateCache.put('filters-template', select );
            element.append(select);
            });
        }

      $scope.valueChanged= function (element) {
         //how can i get this event fired?
         alert("change event fired");
       }
}]);

以下是我的html如何 -

<div id="filters-div" ng-include="filters-template"></div>

请告诉我在代码中我做错了什么？我很抱歉我很有棱角，我可能会做些傻事。

Answer 1

如果您确实需要在模板内部创建一些HTML，则必须使用$compile。但在这种情况下，您可以在模板中生成HTML。此外，你真的不需要使用jQuery，你不能在AngularJS控制器内操纵DOM。以下是我如何渲染选择框的示例：

<!doctype html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.js"></script>
    </head>
    <body data-ng-app="app" data-ng-controller="MainController">
        <select id="{{item.id}}" data-ng-model="option">
            <option
                data-ng-repeat="value in item.Values"
                data-ng-value='value.ID'>{{value.Name}}</option>
        </select>

        <script>
            var app = angular.module('app', []);
            app.controller("MainController", function($scope, $timeout) {
                $timeout(function() {
                    $scope.item = {
                        'id': 'item_id',
                        'Values': [
                            {
                                'ID': '1',
                                'Name': 'First'
                            },
                            {
                                'ID': '2',
                                'Name': 'Second'
                            },
                            {
                                'ID': '3',
                                'Name': 'Third'
                            }
                        ]
                    };
                    $scope.option = $scope.item['Values'][0]['Name'];
                }, 1000);
                
                $scope.$watch('option', function (newVal) {
                    if (newVal) {
                        console.log("Selected option " + newVal);
                    }
                });
            });
        </script>
    </body>
</html>

我使用$ timeout来模拟AJAX请求。您还可以将ng-show添加到模板中，这样如果没有填充数据，您将不会显示选择框。

将ngChange事件绑定到动态生成的控件

1 个答案: