Question

我试图在SweetAlert中建立一个登录/注册表单。

一切正常，但是我试图在我的数组中选择由ng-repeat组成的选项。

这是我的代码：

我的innerHTML的一部分：

var registerForm = document.createElement("div");
registerForm.innerHTML = "<form><div class=\"row\"><div class=\"col-lg-6\"><label style=\"float: left;\" for=\"firstname\"><b>Firstname:</b></label><input type=\"text\" id=\"firstname\" class=\"form-control\"> 
<label style=\"float: left;\" for=\"lastname\"><b>Lastname:</b></label><input type=\"text\" id=\"lastname\" class=\"form-control\">
<label style=\"float: left;\" for=\"login\"><b>Login:</b></label><input type=\"text\" id=\"login\" class=\"form-control\"> 
<label style=\"float: left;\" for=\"password\"><b>Password:</b></label><input type=\"password\" id=\"password\" class=\"form-control\"> 
<label style=\"float: left;\" for=\"password-again\"><b>Repeat Password:</b></label><input type=\"password\" id=\"password-again\" class=\"form-control\"></div> 
<div class=\"col-lg-6\"><label style=\"float: left;\" for=\"email\"><b>E-Mail:</b></label><input type=\"text\" id=\"email\" class=\"form-control\">
<label style=\"float: left;\" for=\"city\"><b>City:</b></label><input type=\"text\" id=\"city\" class=\"form-control\"> 
<label style=\"float: left;\" for=\"postal\"><b>Postal Code:</b></label><input type=\"text\" id=\"postal\" class=\"form-control\"> 
<label style=\"float: left;\" for=\"adress\"><b>Adress:</b></label><input type=\"text\" id=\"adress\" class=\"form-control\">
<label style=\"float: left;\" for=\"country\"><b>Country:</b></label><select class=\"form-control\" ng-model=\"countires\" required><option ng-repeat=\"item in countries\" value=\"{{item.id}}\">{{item.name}}</option></select>
</div>
<div class=\"col-lg-12\"><p style=\"float:left;\">Fields marked with <span class=\"redstar\"><b>*</b></span> are required.</p></div></div></form>";

我的swal以及我如何将html加入其中：

$scope.registerSwal = function(){
    swal({
      title: 'Sign Up',
      text: 'Create a new account.',
      content: registerForm,
      buttons: {
        stop: {
        text: "Cancel",
        className: "red-modal-button",
        },
        ok: {
          text: "Register",
          value: "ok",
          className: "green-modal-button",
        },
      }
    });
}

我的国家/地区阵列：

$scope.countries = {1 : {name: 'Poland', id: 1}, 1 : {name: 'Holland', id: 2}};

这是输出：

问题是我ng-repeat中的innerHTML选择选项无法正常工作。我有什么方法可以做到吗？

Answer 1

不要使用directive操纵AngularJS中的DOM：

在高级别，指令是DOM元素上的标记（例如属性，元素名称，注释或CSS类），它告诉AngularJS的HTML编译器（$ compile）将指定的行为附加到该DOM元素（例如，通过事件监听器），甚至转换DOM元素及其子元素。

注意： $scope.countries不是数组。我把它变成了一个数组。

视图

<div ng-controller="MyCtrl">
  <my-directive countries="countries"></my-directive>
</div>

AngularJS应用程序：

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

myApp.controller('MyCtrl', function ($scope) {
    $scope.countries = [
      {name: 'Poland', id: 1},
      {name: 'Holland', id: 2}
    ];
});

myApp.directive('myDirective', function () {
    return {
      restrict: 'E',
      scope: {
        countries: '='
      },
      template: `<form>
            <div class="row">
                <div class="col-lg-6"><label style="float: left;" for="firstname"><b>Firstname:</b></label>
                    <input type="text" id="firstname" class="form-control">
                    <label style="float: left;" for="lastname"><b>Lastname:</b></label>
                    <input type="text" id="lastname" class="form-control">
                    <label style="float: left;" for="login"><b>Login:</b></label>
                    <input type="text" id="login" class="form-control">
                    <label style="float: left;" for="password"><b>Password:</b></label>
                    <input type="password" id="password" class="form-control">
                    <label style="float: left;" for="password-again"><b>Repeat Password:</b></label>
                    <input type="password" id="password-again" class="form-control">
                </div>
                <div class="col-lg-6"><label style="float: left;" for="email"><b>E-Mail:</b></label>
                    <input type="text" id="email" class="form-control">
                    <label style="float: left;" for="city"><b>City:</b></label>
                    <input type="text" id="city" class="form-control">
                    <label style="float: left;" for="postal"><b>Postal Code:</b></label>
                    <input type="text" id="postal" class="form-control">
                    <label style="float: left;" for="adress"><b>Adress:</b></label>
                    <input type="text" id="adress" class="form-control">
                    <label style="float: left;" for="country"><b>Country:</b></label>
                    <select class="form-control" ng-model="countires" required>
                        <option ng-repeat="item in countries" value="{{item.id}}">
                            {{item.name}}
                        </option>
                    </select>
                </div>
                <div class="col-lg-12">
                    <p style="float:left;">Fields marked with <span class="redstar"><b>*</b>
                    </span> are required.</p>
                </div>
            </div>
        </form>` 
    }
});

<强>＆GT; Demo fiddle

Answer 2

您需要将forestfires$month <- as.character(match(forestfires$month, tolower(month.abb)))编译到合并范围中才能在合并范围上使用registerForm。

ng-repeat

Answer 3

更改对象中的重复键，它可以正常工作。

$scope.countries = {1 : {name: 'Poland', id: 1}, 2 : {name: 'Holland', id: 2}};

演示：

带有SweetAlert的innerHTML中的AngularJS

3 个答案:

视图

AngularJS应用程序：