我写了一个简单的过滤器,但由于我使用的变量,它似乎不起作用。 这是代码:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<script type="text/JavaScript">
var app = angular.module('myApp',[]);
app.factory('Property', function () {
/**
* Constructor, with class name
*/
function Property(newProperty) {
this.id = newProperty.id;
this.purchasePrice = newProperty.pprice;
this.marketValue = newProperty.mv;
this.stampDuty = newProperty.stamp;
this.sourcingFee = newProperty.sourcing;
this.legaFee = newProperty.legal;
this.otherFee = newProperty.other;
this.mortgage = null;
}
return {
createNew: function(newProperty) {
return new Property(newProperty);
},
setMortgage: function(newMortgage) {
console.log(newMortgage);
this.mortgage = Mortgage.createNew(newMortgage);
}
};
});
app.factory('portfolio', function(Property, $filter){
var portfolio = {};
portfolio.list = [];
portfolio.add = function(newProperty){
var prop = Property.createNew(newProperty);
portfolio.list.push(prop);
};
portfolio.getProperty = function(propertyId) {
var property = $filter('filter')(portfolio.list, propertyId, true);
alert("property found: " + $filter('json')(property) + $filter('json')(filterArg));
return property;
};
return portfolio;
});
app.controller('ListCtrl', function(portfolio) {
var self = this;
self.portfolio = portfolio.list;
});
app.controller('PostCtrl', function(portfolio){
var self = this;
self.addProperty = function(newProperty){
newProperty.id = portfolio.list.length;
portfolio.add(newProperty);
};
self.getProperty = function(search){
property = portfolio.getProperty(search);
}
});
</script>
</head>
<body ng-app="myApp">
<div style="text-align: center">
<h2>Initial investment</h2>
<ul class="list">
<input type="hidden" ng-model="newProperty.id" placeholder="id">
<input type="text" ng-model="search" placeholder="search">
<li class="list__item">
<input type="number" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" ng-model="newProperty.pprice" placeholder="Purchase price" required>
</li>
<li class="list__item">
<input type="number" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" ng-model="newProperty.mv" placeholder="Market value">
</li>
<li class="list__item">
<input type="number" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" ng-model="newProperty.stamp" placeholder="Stamp duty">
</li>
<li class="list__item">
<input type="number" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" ng-model="newProperty.sourcing" placeholder="Sourcing fee">
</li>
<li class="list__item">
<input type="number" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" ng-model="newProperty.legal" placeholder="Legal fee">
</li>
<li class="list__item">
<input type="number" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" ng-model="newProperty.other" placeholder="Other">
</li>
</ul>
</div>
<br />
<div ng-controller="ListCtrl as list">
<p ng-repeat="prop in list.portfolio track by $index">
New Object: {{prop.id}} - {{prop.purchasePrice}}: {{prop.legaFee}} </p>
</div>
<div ng-controller="PostCtrl as post">
<button class="button" ng-click="post.addProperty(newProperty)">Add Property</button><br/>
<button class="button" ng-click="menu.setMainPage('finance.html')">Next <ons-icon icon="ion-arrow-right-b"></ons-icon></button><br/>
<button class="button" ng-click="post.getProperty(search)">Search Property</button>
<p>{{newProperty}}</p>
</div>
</body>
</html>
所以如果我们仔细观察
portfolio.getProperty = function(propertyId) {
var property = $filter('filter')(portfolio.list, propertyId, true);
alert("property found: " + $filter('json')(property) + $filter('json')(filterArg));
return property;
};
它不喜欢它。 如果我改变
var property = $filter('filter')(portfolio.list, {id: propertyId}, true);
代表
var property = $filter('filter')(portfolio.list, {id: 2}, true);
它有效(只要我在portfolio.list中添加了2个对象)
我试过
var object = {};
object.id = propertyId;
var property = $filter('filter')(portfolio.list, object.id, true);
哪个不起作用但是这个有效
var object = {};
object.id = 1;
var property = $filter('filter')(portfolio.list, object.id, true);
以及其他一些没有成功的事情。我做错了什么?
答案 0 :(得分:1)
获胜者是......
portfolio.getProperty = function(propertyId) {
var property = $filter('filter')(portfolio.list, {id: +propertyId}, true);
return property;
};
问题是搜索返回一个字符串,它必须以整数转换。但是在javascript中发现类型问题并不容易......
感谢大家的帮助。
答案 1 :(得分:0)
我试图理解你的代码,但没有得到。然后我用最终类似的目标装载这个例子。可以评估是否适合您?过滤器使用对象的属性和值
var myapp = angular.module('myapp', []);
myapp.controller('AppController', function ($scope) {
$scope.objectList = [
{
"age":"32",
"name":"Daniel Grey"
},{
"adress" : "Rua Xyz",
"Phone" : "000-0000"
}];
$scope.add = function(){
$scope.objectList.push($scope.newProperty);
}
});
myapp.filter('objectFilter', function(){
return function(objects, criteria){
var filterResult = new Array();
if(!criteria)
return objects;
angular.forEach(objects, function(item, key) {
angular.forEach(item, function(value, propertie) {
if((String(propertie).indexOf(criteria) > -1 || String(value).indexOf(criteria) > -1) && filterResult.indexOf(item) == -1)
filterResult.push(item);
});
});
return filterResult;
}
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp" ng-controller="AppController">
<div>Filter by name only: <input type="text" ng-model="search" /></div>
<ul>
<li ng-repeat="item in (objectList | objectFilter:search) track by $index">{{item}}</li>
</ul>
<hr>
<ul class="list">
<input type="hidden" ng-model="newProperty.id" placeholder="id">
<li class="list__item">
<input type="number" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" ng-model="newProperty.pprice" placeholder="Purchase price" required>
</li>
<li class="list__item">
<input type="number" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" ng-model="newProperty.mv" placeholder="Market value">
</li>
<li class="list__item">
<input type="number" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" ng-model="newProperty.stamp" placeholder="Stamp duty">
</li>
<li class="list__item">
<input type="number" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" ng-model="newProperty.sourcing" placeholder="Sourcing fee">
</li>
<li class="list__item">
<input type="number" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" ng-model="newProperty.legal" placeholder="Legal fee">
</li>
<li class="list__item">
<input type="number" class="text-input text-input--transparent" style="width:100%; margin-top:4px;" ng-model="newProperty.other" placeholder="Other">
</li>
</ul>
<input type="button" value="Add" ng-click="add();"/>
</div>
&#13;