Question

对angularjs来说是新手。并使用this link创建预先输入。它工作正常。但我无法动态创建。请参考解决方案。

这是我的代码

$scope.addField = function() {
    var html = '<div class="form-group">
            <label for="area2">Area 2</label>
            <input type="text" name="area2" ng-model="doctor.area2" placeholder="Search Countries" typeahead="c as c.country for c in countries | orderBy:'+"'country'"+' | filter:$viewValue | limitTo:10" typeahead-min-length="1" typeahead-on-select="onSelectPart($item, $model, $label)" typeahead-template-url="customTemplate.html" class="form-control"   >
        </div>';

        var topScope = angular.element(document).scope();
        var elem = $compile(html)(topScope);
        angular.element(document.getElementById('more_Areas')).append(elem);
    };

<div class="form-group"  >
                <label   ><a  ng-click='addField()'>Add More Practice Areas</a></label>
            </div> 
            <div id="more_Areas"  >
            </div>

Answer 1

你可以使用它，我已经使用了几次..你也可以通过将ng-model更改为field.modelName来为你添加的每个新字段指定一个模型

$scope.fields = [];
$scope.addField = function() {
    var topScope = angular.element(document).scope();
    var elem = $compile(html)(topScope);
    $scope.fields.push({});
};

<div class="form-group"  >
    <label>
      <a ng-click='addField()'>Add More Practice Areas</a>
    </label>
</div> 

<div id="more_Areas"  >
    <div ng-repeat="field in fields">
        <input name="category" type="text" ng-model="person.category" placeholder="Category" required/> <span class="alert alert-error ng-show="add-bro.input.$error.required">Required</span>
    </div>      
</div>

如何通过点击动态追加预先输入？

1 个答案: