我是 Angular 的新手。当前享受学习新事物的乐趣。
这是我的意图 - 我想要一个输入框列表。然后我想从用户输入中获取组合的字符串值。输入框的数量是从自定义指令的父 Controller 传递的。获得组合值后，我还需要将其传递回其父范围。
这就是我目前所处的位置。
angular.module('starter.directives', [])
.directive('userInput', function($compile) {
return {
// templateUrl: 'templates/user-input-singlebox.html',
template: '<div></div>',
restrict: 'E',
scope: {
records: '='
},
//controller needs to serve as API
controller: function($scope) {
},
link: function($scope, $element, $attrs) {
$scope.inputCount = $scope.$parent.userInputStaticCount;
var records = [];
$scope.getInputBoxNum = function() {
return new Array($scope.inputCount);
};
$scope.userInputBoxRecordList = "hello";
$scope.getUserInput = function() {
//return a combined string of value from input box index 0 to input box index n-1;
}
var html = '<div ng-repeat="i in getInputBoxNum() track by $index"><input id="{{$index+1}}" type="text" ng-model="userInputBoxRecordList" name="box"' + 'style="background-color:beige; border:1px solid black;"></div>';
var e = $compile(html)($scope);
$element.replaceWith(e);
}
}
});
- 但是，我为每个输入框分配了一个唯一的 id，我想知道是否有更好的方法，例如使用 ng-model 来使 userInput() 函数正常工作。
- 我想动态生成用户输入框的列表。目前我将所有代码放在帖子链接功能中。我相信我可以在模板中编写一个输入框，然后生成一个框列表。然而自己却没有弄清楚。有什么提示吗？
最佳答案
您可以使用对象数组而不是项目数组。然后，在每个对象上，您可以通过使用 ng-model 绑定(bind)文本属性来使用文本属性来跟踪输入字段的值。而不是有一个函数可以迭代数组并连接要收集的文本。希望这对您有用
// js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.combinedString = '';
$scope.InpustStaticCount =5 ;
$scope.getCombinedString = function(){
$scope.items.forEach(function(el){
$scope.combinedString += el.text + ", ";
console.log($scope.combinedString);
});
}
});
app.directive('userInput', function($compile) {
return {
templateUrl: 'dir.html',
restrict: 'E',
scope:false,
//controller needs to serve as API
controller: function($scope) {
},
link: function($scope, $element, $attrs) {
$scope.items = [];
for(var i = 0; i < $scope.InpustStaticCount; i ++ ){
$scope.items.push({text: ''}); }
}
}
});
// main html
<body ng-controller="MainCtrl">
<p>Enter data in input boxes then press button</p>
<user-input></user-input>
<button class="btn btn-info" ng-click="getCombinedString()">Get Combined String</button>
<div class="panel panel-info">
<div class="panel-heading">Combined String</div>
<div class="panel-body">{{combinedString}}</div>
</div>
</body>
//directive html
<div ng-repeat = "item in items track by $index">
<input id="{{$index+1}}" type="text" ng-model='item.text' > {{$index}} {{item.text}}
</div>
这是一个使用隔离范围而不是共享范围的指令
app.directive('userInputIsolate', function($compile) {
return {
templateUrl: 'dir.html',
restrict: 'E',
scope:{
inpuststaticount : "=",
items: '='
},
//controller needs to serve as API
controller: function($scope) {
},
link: function($scope, $element, $attrs) {
console.log($scope.inpuststaticount)
for(var i = 0; i < $scope.inpuststaticount; i ++ ){
$scope.items.push({text: ''}); }
}
}
});
app.controller('MainCtrl', function($scope) {
$scope.secondcombinedString = '';
$scope.InpustStaticCount =5 ;
$scope.secondItems = [];
$scope.getCombinedStringIsolate = function(){
$scope.secondItems.forEach(function(el){
$scope.secondcombinedString += el.text + ", ";
console.log($scope.combinedString);
});
}
});
// main html
<user-input-isolate inpuststaticount= 'InpustStaticCount' items = 'secondItems' ></user-input-isolate>
关于javascript - 从 Angular 自定义指令中获取带有输入框列表的组合字符串，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33378967/