AngularJS如何获取一个数组,该数组将数字添加到函数中的元素,然后用另一个函数分散其注意力
AngularJS how to get an array that adds a number to an element in a function and later distracts it with another function
所以我想创建一个应用程序,如果this.parts[partId].comp[i]
中提到了this.parts
部分中部分的id
,则需要一个数组向元素添加一个数字。但是,如果我尝试运行该函数,它会在警报NaN
而不是元素的值中。为什么它不是一个数字,我该如何解决它?
应用.js:
(function(){
var app = angular.module('kompileApp', []).controller('partsList', function($scope){
this.parts = parts;
// this.ps = partSelected;
this.order = orderString;
this.ap = aantalProducts;
this.aa = addedArray;
this.aaString = addedArrayString;
this.jaddString = justAdded;
this.cc = compCount;
this.jadd = function(partId){
this.jaddString = parts[partId - 1].id + ': ' + parts[partId - 1].name + ', ' + parts[partId - 1].price + '| ';
this.aa[partId - 1] = this.jaddString;
};
this.arrayToString = function(){
for (i = 0; i < this.aa.length; i++){
if(this.aa[i] != undefined){
this.aaString = this.aaString + this.aa[i];
this.aa[i];
};
};
};
this.stillPossible = function(partId){
for(i = 0; i < this.parts[partId - 1].comp.length; i++){
if(this.parts[partId - 1].comp[i] != undefined){
this.parts[(this.parts[partId - 1].comp[i]) - 1].canAdd = false;
this.cc[this.parts[(this.parts[partId - 1].comp[i]) - 1]] = this.cc[this.parts[(this.parts[partId - 1].comp[i]) - 1]] + 1;
alert(this.cc[this.parts[(this.parts[partId - 1].comp[i]) - 1]]); //this alert gives 'NaN' (Not a Number)
};
};
this.parts[partId - 1].added = true;
};
this.nowPossible = function(partId){
for(i = 0; i < this.parts.length; i++){
for (j = 0; j < this.cc.length; j++){
if(this.parts[i].comp[j] != undefined || this.parts[i].added === true){
this.cc[this.parts[(this.parts[i].comp[j]) - 1]] = this.cc[this.parts[(this.parts[i].comp[i]) - 1]] - 1 ;
if (this.cc[this.parts[(this.parts[i].comp[j]) - 1]] === 0){
this.parts[(this.parts[i].comp[j]) - 1].canAdd = true;
alert('123');
};
};
};
};
this.parts[partId - 1].added = false;
};
});
this.ccInit = function(){
for (i = 0; i < this.cc.length; i++){
this.cc[i] = 0;
}
};
var parts = [
{
id: 1,
name: 'vitamine A',
price: 3,
canAdd: true,
added: false,
comp: [2, 5]
},
{
id: 2,
name: 'vitamine B',
price: 5,
canAdd: true,
added: false,
comp: [1]
},
{
id: 3,
name: 'vitamine C',
price: 2,
canAdd: true,
added: false,
comp: []
},
{
id: 4,
name: 'Opium',
price: 20.95,
canAdd: true,
added: false,
comp: []
},
{
id: 5,
name: 'steroids',
price: 12.5,
canAdd: true,
added: false,
comp: [1]
}
];
var orderString = "i am the orderstring...";
/*
for (i=0;i<parts.length; i++){
orderString = text = $('p' + i).text();
}
*/
var aantalProducts;
aantalProducts = 0;
var addedArray = new Array(parts.length);
var addedArrayString = '';
var compCount = new Array(parts.length);
var justAdded = '';
})();
.html:
<ul class="plist">
<li ng-repeat="part in pl.parts | orderBy:'+price'" ng-hide="part.added || !part.canAdd" class="plLi">
<div class="plistDivName">
{{part.name}} <!--alternatief: <span ng-bind="part.name"></span> -->
{{part.price | currency : "€"}} <!--| currency om 2 cijfers na de komma te krijgen alternatief: <span ng-bind="part.price | currency"></span> -->
</div>
<div class="plistDivButton">
<button ng-click="pl.ap = pl.ap + 1; pl.jadd(part.id); pl.stillPossible(part.id)" ng-show="part.canAdd" class="plistbutton">add</button> <!-- veranderd value van pl.parts.added naar true -->
</div>
</li>
</ul>
</div>
<!-- list van ge-adde parts-->
<div class="plistDiv">
<p class="plistP">your product:</p>
<ul class="plist">
<li ng-repeat="part in pl.parts | orderBy:'+price'" ng-show="part.added" class="plLi">
<div class="plistDivName">
{{part.name}}
{{part.price | currency : "€"}} <!-- | currency om 2 cijfers na de komma te krijgen -->
</div>
<div class="plistDivButton">
<button ng-click="pl.nowPossible(part.id); pl.ap = pl.ap - 1; pl.aa[part.id - 1] = ''" class="plistbutton">remove</button> <!-- verranderd value van pl.parts.added naar false -->
</div>
</li>
</ul>
你调试
过代码吗?尝试使用浏览器的开发人员工具进行调试(例如 https://developers.google.com/web/tools/chrome-devtools/)
您可以设置断点并在添加之前和之后检查值。
此外,使用角度$log.log("值是:",someValue);注销对象和值。
我的猜测是,该值不是您认为的那样(未定义,字符串等)。
使用 $log 或 alert 显示用于获取结果的值(如果你知道如何操作,也可以通过调试执行此操作)
alert(partId);
alert(this.parts[partId - 1]);
alert(this.parts[partId - 1].comp[i]);
alert(this.parts[(this.parts[partId - 1].comp[i]) - 1]);
alert(this.cc[this.parts[(this.parts[partId - 1].comp[i]) - 1]]);
在代码中重新访问以下行:
this.cc[this.parts[(this.parts[partId - 1].comp[i]) - 1]] = this.cc[this.parts[(this.parts[partId - 1].comp[i]) - 1]] + 1;
这里有两点需要注意:
- 首先
this.cc
数组是具有空白值的数组。 - 第二个也是最重要的 上行中的this.parts[(this.parts[partId - 1].comp[i]) - 1]将标识一个对象而不是一个数字,因此 this.cc[不会是数值],所以上面的行不会给出想要的结果。
相关文章:
- 数组函数不适用于从元素文本创建的JavaScript数组
- 如何在javascript中求解pack数组函数
- 制作一个javascript的数组函数
- 获取元素的位置并创建它的数组函数
- 茉莉花中的 SpyOn javascript 数组函数
- 自定义数组函数不接受参数
- 使用原型的自定义数组函数.新的 MyArray(1,2,3,4) 不工作
- Java 脚本随机化数组函数
- 在 Restangular 集合上使用 lodash 数组函数
- 比较数组函数返回未定义
- Javascript中嵌套for循环与数组函数的性能
- 多维数组函数在JS中不起作用
- Javascript数组函数有我看不到的错误
- 数组函数外的javascript
- 在数组/函数中循环时使用换行符
- 拼接javascript数组函数获胜't删除项目
- 为什么不'这个js数组函数不能工作
- 如何在我自己的数组原型函数中使用数组函数
- 在javascript中定义数组函数
- Jquery动态树数组函数