制作一个程序,我需要使用角度js数组,我需要以良好的方式显示函数返回的角度js数组元素。首先包含第一个元素,第二个包含第二个元素等等......并且必须使用函数来执行一些未来的任务。 提前致谢 例如: -
第一次尝试:- 第一个元素= 23 第二个元素= 45
第二次尝试:- 第一个元素= 20 第二个元素= 15
第三次尝试......第四次尝试等等
<head>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script>
</head>
<body><div ng-app="plunker" ng-controller="MainCtrl">
<div ng-repeat='selecting in selects' ng-init="selecting.var1=selecting.var2=a='';">
<input type="text" ng-model="selecting.var1">
<input type="text" ng-model="selecting.var2">
<button type='button' ng-click='remove(selecting)'>Remove</button>
</div>
<div>
<button type='button' ng-click='add()'>Add</button>
</div>
<p>{{ x = test()}}</p>
<!-- first block -->
<!-- second block and so on-->
<li ng-repeat="x in b" style="list-style:none">
first attempt= {{ x.first | number:0 }} <br>
second second= {{ x.second | number:0}}
</li>
</div>
<script>
var app = angular.module("plunker",[]);
app.controller("MainCtrl",['$scope',function($scope){
$scope.test = function()
{
var result=1,id2,a,b;
$scope.result1 = [{}];
angular.forEach($scope.selects, function(value)
{ // loop over array to process all items
a = value.var1;
b = value.var2;
alert(a);
$scope.result1.push({name:$scope.selecting.var1});
//myarray = {"first":a,"second":b}
//a['first','second'] = (a,b);
return result1;
})
}
$scope.selects = [{}]; // default 1 sets
// functions to ADD/Remove --------------------------------------------------------------------------------
$scope.add = function()
{
$scope.selects.push({});
}
$scope.remove = function(item)
{
angular.forEach($scope.selects, function(value, key)
{
if (value == item)
{
$scope.selects.splice(key, 1);
}
});
}
// functions to ADD/Remove ---------------------------------------------------------------------------------
}]);
</script>
</body>
</html>
答案 0 :(得分:1)
我不知道您在test()
功能中想要实现的目标,但如果您只是想显示您当时模型的内容,那么似乎不需要为此创建一个函数:Angular为您保持模型同步,这是框架的主要卖点之一。
这是你想要实现的目标吗?
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script>
</head>
<body>
<div ng-app="plunker" ng-controller="MainCtrl">
<div ng-repeat='textBoxes in textBoxGroups' >
<input type="text" ng-model="textBoxes.textBoxOne.value">
<input type="text" ng-model="textBoxes.textBoxTwo.value">
<button type='button' ng-click='remove($index)'>Remove</button>
</div>
<div>
<button type='button' ng-click='add()'>Add</button>
</div>
<div>
<button type='button' ng-click=doSomething()>Do Something</button>
</div>
<h3>Text Box Group Model</h3>
<table>
<thead>
<tr>
<th>$index</th>
<th>TxtBox1</th>
<th>TxtBox2</th>
</tr>
</thead>
<tbody>
<tr ng-repeat='textBoxes in textBoxGroups'>
<td>{{$index}}</td>
<td>{{textBoxes.textBoxOne.value}}</td>
<td>{{textBoxes.textBoxTwo.value}}</td>
</tr>
</tbody>
</table>
<h3>Char Count: {{charCount}}</h3>
<h3 ng-show="processedData.length">Data After Some Process</h3>
<table ng-show="processedData.length">
<thead>
<tr>
<th>$index</th>
<th>Original</th>
<th>Updated</th>
</tr>
</thead>
<tbody>
<tr ng-repeat='data in processedData'>
<td>{{$index}}</td>
<td>{{data.original}}</td>
<td>{{data.updated}}</td>
</tr>
</tbody>
</table>
</div>
<script>
var app = angular.module("plunker",[]);
app.controller("MainCtrl", ['$scope', function($scope){
$scope.textBoxGroups = [ {
textBoxOne: { value: '' },
textBoxTwo: { value: '' }
} ];
$scope.add = function(){
$scope.textBoxGroups.push({
textBoxOne: { value: '' },
textBoxTwo: { value: '' }
});
}
$scope.remove = function($index){
// just pass in the $index of the element you want to remove
// and splice it out
$scope.textBoxGroups.splice($index, 1);
}
$scope.doSomething = function(){
$scope.processedData = [];
$scope.charCount = 0;
angular.forEach($scope.textBoxGroups, function(textBoxGroup){
$scope.processedData.push({
original: textBoxGroup.textBoxOne.value,
updated: textBoxGroup.textBoxOne.value.toUpperCase()
});
$scope.charCount += textBoxGroup.textBoxOne.value.length;
});
}
}]);
</script>
</body>
</html>