使用Angular指令从数组生成html

IrishGuy 发表于 Dev

爱尔兰人

我正在尝试使用Angular指令创建一个表单，用户可以在其中指定孩子的数量，并为每个孩子显示一个编辑框，以允许输入孩子的出生日期。

这是我的HTML：

<div ng-app>
  <div ng-controller="KidCtrl">
    <form>
    How many children:<input ng-model="numChildren" ng-change="onChange()"/><br/>
    <ul>
        <li ng-repeat="child in children">
            <child-dob></child-dob>
        </li>
      </ul>
    </form>
  </div>
</div>

这是JS：

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

function KidCtrl($scope) {
  $scope.numChildren = 2
  $scope.children = [{dob: "1/1/90"}, {dob: "1/1/95"}];
  $scope.onChange = function () {
    $scope.children.length = $scope.numChildren;
  }
}

app.directive('childDob', function() {
    return {
      restrict: 'E',
      template: 'Child {{$index+1}} - date of birth: <input ng-model="child.dob" required/>'
    };
  });

这是一个jsFiddle

问题在于它只是无法正常工作。如果我在numChildren字段中输入1，则它会为list元素显示1个项目符号，但不会显示任何HTML。如果我在numChildren字段中输入2，则不会显示任何列表元素。

谁能解释我在做什么错？

非常感谢 ...

PSL

您的主要问题是该指令childDOB从不呈现。即使您的控制器可以正常工作，因为Angle的1.2.x版本已启用全局控制器。它将在全局范围内查找任何公共构造函数以匹配ng-controller指令中的控制器名称。指令不会发生这种情况。因此，缺少ng-app="appname"指令将无法呈现。因此，添加应用名称，ng-app="myApp"然后查看它是否正常运行。最好不要污染全局范围并向controller()构造函数正确注册控制器。（无论如何，从1.3.x开始不建议使用全局查找，只能在全局级别关闭。）

您还需要添加track byng-repeat，这是由于基于文本框值增加数组的长度而可能导致的转发器。这可能导致多个数组值未定义，从而导致重复。所以：-

 ng-repeat="child in children track by $index"

小提琴

HTML

<div ng-app="myApp">
    <div ng-controller="KidCtrl">
        <form>How many children:
            <input ng-model="numChildren" ng-change="onChange()" />
            <br/>
            <ul>
                <li ng-repeat="child in children track by $index">{{$index}}
                    <child-dob></child-dob>
                </li>
            </ul>
        </form>
    </div>
</div>

脚本

(function () {

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

    app.controller('KidCtrl', KidCtrl);

    KidCtrl.$inject = ['$scope'];
    function KidCtrl($scope) {
        $scope.numChildren = 2
        $scope.children = [{
            dob: "1/1/1990"
        }, {
            dob: "1/1/1995"
        }];
        $scope.onChange = function () {
            $scope.children.length = $scope.numChildren;
        }
    }

    app.directive('childDob', function () {
        return {
            restrict: 'E',
            template: 'Child {{$index+1}} - date of birth: <input ng-model="child.dob" required/>'
        }
    });
})();

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。

编辑于2021-02-19

我来说两句

0条评论

登录后参与评论

来自分类Dev

Related 相关文章

文章