在Angularjs中添加具有不同值的新HTML内容
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在Angularjs中添加具有不同值的新HTML内容相关的知识，希望对你有一定的参考价值。
我创建了一个指令，只要单击“添加”按钮就可以添加一些内容。但我不知道如何在这些新输入中获得所有值。
html代码
angular.module('myApp', [])
.controller('myController', function() {
})
.directive('addContent', function($document, $compile) {
return {
restrict: 'A',
replace: false,
link: function(scope, element, attr) {
element.on('click', function() {
var newcontent = '<input type="text" ng-model="myModel"><br>';
angular.element($document[0].querySelector('.newcontent')).append($compile(newcontent)(scope));
})
}
}
})<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="newcontent" ng-app="myApp" ng-controller="myController">
<button type="button" add-content>Add</button><br><br>
</div>那么，如何为每个创建的新输入设置不同的ng-model值，如何在控制器中获取此值？
答案
你可以用这样的东西：
The Idea:
- 可以从应用指令的html定义基本名称。
- 在创建新输入时，指令中使用增量编号（使用此模型的视图控制器（程序员）必须注意这一点）。实际上，在这种情况下，您可以使用您更喜欢的任何其他策略。为了简单起见，我使用了这个，并说明了我的观点。
The code (see below snippet):
在指令中
- 在添加新输入时创建一个递增计数器：
var count = 0; - 使用
var model = scope.$eval(attr['addContent']);获取html中指定的基本名称 - 修改
newcontent变量以使用该基本名称和增量计数器，如下所示：var newcontent = '<input type="text" ng-model="' + model + (count++) + '"><br>';
控制器
- 对于组织，创建一个用于保存基本名称的变量：
$scope.buttonModel = 'buttonModelReference'; - 访问这些新模型的值如下：
$scope[$scope.buttonModel + $scope.index]其中$scope.index是输入的索引（其中0是创建的第一个输入）
风景
- 使用像
add-content="buttonModel"这样的修改后的指令，其中buttonModel是控制器中定义的变量。
加代码（仅用于演示目的）
showModel函数显示一个（动态创建的）输入的值，作为参考传递输入的索引（0零是创建的第一个输入的索引）
The Snippet
angular.module('myApp', [])
.controller('myController', function($scope) {
$scope.index;
$scope.buttonModel = 'buttonModelReference';
$scope.showModel = function() {
console.log($scope[$scope.buttonModel + $scope.index]);
}
})
.directive('addContent', function($document, $compile) {
var count = 0;
return {
restrict: 'A',
replace: false,
link: function(scope, element, attr) {
element.on('click', function() {
var model = scope.$eval(attr['addContent']);
var newcontent = '<input type="text" ng-model="' + model + (count++) + '"><br>';
angular.element($document[0].querySelector('.newcontent')).append($compile(newcontent)(scope));
})
}
}
})<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="newcontent" ng-app="myApp" ng-controller="myController">
<button type="button" ng-click="showModel()">showModel</button> <input ng-model="index" type="number" placeholder="select the model index starting from 0" /> <br><br>
<button type="button" add-content="buttonModel">Add</button><br><br>
</div>以上是关于在Angularjs中添加具有不同值的新HTML内容的主要内容，如果未能解决你的问题，请参考以下文章