I'm using angular. I have a input that looks like:
<input class="form-control" type="text" ng-model="newBook.color">
basically when this is changed, I want a div's background color to be changed.
My controller has some lines that look like:
$scope.newBook = {};
$scope.newBook.color = "";
$scope.color = ->
return "background-color: " + $scope.newBook.color;
and then the div I want to change:
<div ng-style="{{color()}}"></div>
However, I get the error: Error: [$parse:syntax] Syntax Error: Token ':' is an unexpected token at column 17 of the expression [background-color:]
I made an example for you here: https://jsfiddle.net/chelogui/2h3hrj1x/
HTML:
<div ng-app="appTest">
<div ng-controller="contr as controller">
<input class="form-control" type="text" ng-model="controller.color" />
<div id="divTest" style="background-color: {{ controller.color }}"></div>
</div>
</div>
Javascript:
angular.module('appTest', [])
.controller('contr', [function () {
var self = this;
self.color = "red";
}]);
Css to exemple:
#divTest {
width: 100px;
height: 100px;
border: 1px solid black;
margin-top: 10px;
}
Here is a working example:
You need to change your color function to do this:
angular.module('myApp',[])
.controller('myFirst',['$scope',function($scope){
$scope.newBook = {};
$scope.newBook.color = "red";
$scope.color = function(){
return "{'background-color' : '"+$scope.newBook.color+"'}";
}
}])
Check this:
angular.module('myApp',[])
.controller('myFirst',['$scope',function($scope){
$scope.newBook = {};
$scope.newBook.color = "red";
$scope.color = function(){
return "{'background-color' : '"+$scope.newBook.color+"'}";
}
}])
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="myFirst" ng-style="{{color()}}">Ajay</div></div>
Related
I am trying to make a table cell clickable. When the cell is clicked it will switch the contents from one cell to another. I want to make a basic chess game out of this click action by eventually using angular.element to get the clicked elements and setting the second clicked square equal to the first clicked.html(). Is this possible in AngluarJs using a MEAN somehow?
My current code looks like this but the table cell isn't changing or doing anything when I click.
app.controller('ChessCtrl' , ['$http', '$scope', '$document', function
ChessCtrl($http, $scope, $document) {
var vm = this;
vm.test1 = angular.element(document.getElementById("A1"));
vm.test2 = "";
vm.test3 = "This is a test";
$scope.click = function() {
var temp = vm.test3;
vm.test2 = temp;
vm.test3 = "";
}
}]);
<div ng-Controller="ChessCtrl">
<div class="content">
<div class="left">
<table style="width: 75%">
<tr>
<td id="A1" ><a ng-bind="vm.test3" ng-click="click()"></a></td>
<td class="grey" ng-bind="vm.test2"><a ng-bind="vm.test2" ng-click="click()"></a>
</td>
<td>
</tr>
</table>
</div>
</div>
</div>
Obviously I am missing something but I have tried adding to a DB and pulling it back out. I have tried ng-model and ng-bind for holding the variables. I am just lost on if or how I can get the td to be clickable and also switch where what is clicked displays. Thanks!
NOTE: disregard test1 in this example... I was using that earlier for testing getting the HTML out of the element.
The HTML doesn't need the <a> tag. Simply set the CSS style to cursor: pointer.
Also the ng-bind directive isn't necessary, simply bind model to HTML with double brace {{ }} expressions.
The DEMO
angular.module("app",[])
.controller('ChessCtrl' , function () {
var vm = this;
vm.test2 = "♔";
vm.test3 = "test";
vm.switch = function() {
var temp = vm.test2;
vm.test2 = vm.test3;
vm.test3 = temp;
}
});
.red { background-color: red; }
.grey { background-color: grey; }
td {
width: 20%;
cursor: pointer;
font-size: 24pt;
}
<script src="//unpkg.com/angular/angular.js"></script>
<body ng-app="app" ng-controller="ChessCtrl as vm">
<table>
<tr>
<td class="red" ng-click="vm.switch()">{{vm.test3}}</td>
<td class="grey" ng-click="vm.switch()">{{vm.test2}}</td>
</tr>
</table>
</body>
Okay, I try to figure out one solution that might work for you too.
I am adding code snippet have a look:
Main challange, that you are facing is, ng-bind,
have a look to this article and find the sole purpose of ng-bind
https://www.w3schools.com/angular/ng_ng-bind.asp
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<table style="width: 75%">
<tr>
<td id="td1" ><a ng-bind="link1" ng-click="clickMe()"></a></td>
<td id="td2" class="" ><a ng-bind="link2" ng-click="clickMeAgain()"></a>
</td>
<td>
</tr>
</table>
</div>
<script>
var clickMeIsClicked = false;
var clickMeAgainIsClicked = false;
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.link1 = 'Click me to show td2';
$scope.link2 = ' I always want to be visible, thanks td1';
$scope.count = 0;
$scope.myFunction = function() {
$scope.count++;
}
$scope.clickMe = function(){
if(!clickMeIsClicked){
$scope.link2 = 'Click me to show td2';
$scope.link1 = ' I always want to be visible, thanks td1';
clickMeIsClicked = true;
}
else{
$scope.link1 = 'Click me to show td2';
$scope.link2 = ' I always want to be visible, thanks td1';
clickMeIsClicked = false;
}
}
$scope.clickMeAgain = function(){
}
});
</script>
</body>
</html>
I am fairly new with AngularJS. I'm trying to do something simple for the moment. I created a table with some text I'll have to search with, a reset button (In my program is called "Pulisci") and some panels I'll have to use later. The problem is that, if I call the function I created for resetting the page, the panels mysteriously stop working. I'm banging my head on this since last week.
HTML
<!DOCTYPE html>
<html ng-app="sbi">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<style>
table,
td {
border-width: 2px;
border-collapse: collapse;
padding: 15px;
color: #000000;
text-align: center;
}
table.pos_fixed1 {
position: relative;
top: 30px;
left: 10px;
}
</style>
</head>
<body>
<form name="form">
<table summary="" width="10%" class="pos_fixed1" align="center">
<tr>
<td>Code Subinstaller<br><input name="codeSub" type="text" ng-model="codeSub"></td>
<td>Stato<br>
<select>
<option value="1">...</option>
<option value="2">WHITE LIST</option>
<option value="3">GRAY LIST</option>
</select>
</td>
</tr>
<tr>
<td>Nome Sub Installer<input name="nomeSub" type="text" ng-model="nomeSub"></td>
<td>Cognome Sub Installer<input name="cognSub" type="text" ng-model="cognSub"></td>
<td>Codice Fiscale<input name="codFisc" type="text" ng- model="codFisc"> </td>
</tr>
</table><br>
<button class="btn btn-wide btn-default.active.focus" data-ng- click="">Cerca</button>
<button class="btn btn-wide btn-default.active.focus" data-ng- click="reset()">Pulisci</button>
</form><br><br>
<section ng-controller="PanelController as panel">
<ul class="nav nav-pills">
<li ng-class="{ active:panel.isSelected(1) }"> <a href ng- click="panel.selectTab(1)">Description</a></li>
<li ng-class="{ active:panel.isSelected(2) }"> <a href ng- click="panel.selectTab(2)">Specifications</a></li>
<li ng-class="{ active:panel.isSelected(3) }"> <a href ng- click="panel.selectTab(3)">Reviews</a></li>
</ul>
<div class="panel" ng-show="panel.isSelected(1)">
<h4>Description </h4>
<p>wtf</p>
</div>
<div class="panel" ng-show="panel.isSelected(2)">
<h4>Idk</h4>
<p>Idc</p>
</div>
<div class="panel" ng-show="panel.isSelected(3)">
<h4>APPARI</h4>
<p>???</p>
</div>
</section>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="myapp.js"></script>
</body>
</html>
JS
(function() {
var app = angular.module('sbi', []);
app.controller('PanelController', function() {
this.tab = 1;
this.selectTab = function(setTab) {
this.tab = setTab;
};
this.isSelected = function(checkTab) {
return this.tab === checkTab;
};
});
})();
(function($scope) {
var app = angular.module('sbi', []);
function MyCtrl($scope) {
$scope.reset = function() {
$scope.requiredField = '';
};
};
});
How can I make the Reset() and the panels work simultaneously?
You have re-initialized your angular module.
Initializing your angular module
var app = angular.module('sbi', []);
Second argument in angular.module() is for injecting the required dependency for the module. And hence should be done only once.
In your code, you have again initialized your module.
(function () {
//initialization
var app = angular.module('sbi', []);
app.controller('PanelController', function () {
this.tab = 1;
this.selectTab = function (setTab) {
this.tab = setTab;
};
this.isSelected = function (checkTab) {
return this.tab === checkTab;
};
});
})();
(function ($scope) {
//edit in your code
//re-using the already initialized module
var app = angular.module('sbi');
function MyCtrl($scope) {
$scope.reset = function () {
$scope.requiredField = '';
};
};
});
You should not pass the second argument as parameter.
Reusing your angular module
var app = angular.module('sbi');
EDIT :
Try the following code :
(function () {
var app = angular.module('sbi', []);
app.controller('PanelController', ['$scope', function($scope) {
$scope.tab = 1;
$scope.selectTab = function (setTab) {
$scope.tab = setTab;
};
$scope.isSelected = function (checkTab) {
return $scope.tab === checkTab;
};
$scope.reset = function () {
$scope.requiredField = '';
};
}]);
})();
There is something you are clearly missing here: your reset function is attached to... nothing.
The MyCtrl function is never called (from what we've seen), and the $scope variable is not injected the Angular-way. Actually, nothing here is in the Angular way. Let me try to adjust this so you understand what you should aim for.
First of all, as #Akshay mentioned, there is a huge difference between angular.module('something', []) and angular.module('something'), but they already pointed that out in their response.
Then, your MyCtrl hasn't been registered as a controller in Angular. You just defined the function, you were missing these lines:
var app = angular.module('sbi');
function MyCtrl($scope) {
$scope.reset = function () {
$scope.requiredField = '';
};
};
// This controller will be known as 'MyCtrl'
app.controller('MyCtrl', MyCtrl);
This should work. Note that you won't be needing the surrounding (function ($scope) {...}) as it won't be executed correctly.
Then, you will have to tell Angular to use that controller in that specific part of your page:
<!-- Adding the ng-controller directive here -->
<form name="form" ng-controller="MyCtrl">
...
<button class="btn btn-wide btn-default.active.focus" data-ng-click="reset()">Pulisci</button>
</form>
Then, you will be able to handle your requiredField variable as you wish.
I am trying to change the focus on enter key on my html input form.
I have to trigger saveValue() from input field while pressing enter and focus to next input field. I am trying with the directive from angularjs move focus to next control on enter but dont know how can i modify according to my need.
angular.module('ionicApp', ['ionic'])
.controller('appCtrl', function($scope) {
$scope.inputs = [{
value: ''
}];
var checkedValues = [];
$scope.addField = function(index) {
console.log(index);
var name = {
'value': ''
};
if ($scope.inputs.length <= index + 1 && $scope.inputs.length < 10) {
$scope.inputs.splice(index + 1, 0, name);
}
}
$scope.saveValue = function(ticked, item, index) {
console.log(index);
if (ticked) {
if (index >= 0) {
$scope.showButton = true;
}
//if(index<=9) checkedValues.splice(index,0,item);
checkedValues[index] = item;
console.log(checkedValues);
} else {
var indexs = checkedValues.indexOf(item);
if (indexs > -1) {
checkedValues.splice(indexs, 1);
}
console.log(checkedValues);
}
}
})
.small-input .item-checkbox .checkbox {
position: absolute;
top: 50%;
right: 8px;
left: 5px!important;
z-index: 3;
margin-top: -20px!important;
transform: scale(1);
}
.checkbox-royal input:before,
.checkbox-royal .checkbox-icon:before {
border-color: #000;
background-color: #387ef5;
}
.checkbox-royal input:checked:before,
.checkbox-royal input:checked + .checkbox-icon:before {
background: #099AD1;
border-color: #387ef5;
}
<html>
<head>
<link href="http://code.ionicframework.com/1.3.2/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.3.2/js/ionic.bundle.js"></script>
</head>
<body ng-app="ionicApp" ng-controller="appCtrl">
<form id="valueForm" ng-submit="submitValues()">
<div class="small-input list padding" style="padding-top:4px;">
<div ng-repeat="item in inputs track by $index">
<label class="item item-input">
<input type="text" placeholder="" ng-model="item.value" ng-disabled="item.ticked">
<ion-checkbox ng-click="addField($index)" ng-change="saveValue(item.ticked,item.value,$index)" ng-model="item.ticked" ng-disabled="!item.value" style="border: none;padding-left: 30px;" class="checkbox-royal"></ion-checkbox>
</label>
</div>
<button type="submit" ng-show="showButton" class="button button-dark button-shadow pull-right" style=""><i class="ion-ios-arrow-forward"></i>
</button>
</div>
</form>
</body>
</head>
The problem you will have is that when the directive keydown handler runs the new input will not exist on the page yet. It will get created later on. I suggest you use a $interval to keep checking when the input has been added and then assign the focus:
elem.bind('keydown', function(e) {
var code = e.keyCode || e.which;
if (code === 13) {
e.preventDefault();
scope.addFieldAndSave(index);
// Create interval to check when the new input has been added
scope.interval = $interval(function() {
var e = $('input[type=text]');
if (e.length === scope.inputs.length) {
scope.cancel();
// Set focus to the last element enabled input
$('input[type=text]:not(:disabled):last').focus();
}
}, 10);
}
});
This is quite complex so I've done a plunker. To get this to work I added a new method in the main controller called addFieldAndSave to do the add and save functions
https://plnkr.co/edit/2NXQB7N7bVxUVQk7PLsx?p=preview
I'm developing an AngularJS Ionic Meteor app, and I need to change the background color of the botton box of an ionic card depending of it contents (a float). The ranges are:
data<=80
81 < data <= 160
161 < data <= 233
234 < data<= 317
318 < data <= 400.
Is there a CSS way to do it, or an AngularJS way instead?
You could use ngClass. Just setup your CSS background-color properties and set in your controller the appropriate class, for example:
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.submit = function() {
if ($scope.data <= 80) $scope.rangeColor = "red";
// Add more conditional statements
else $scope.rangeColor = "blue";
}
}
.card {
border-style: solid;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
<h4>Data:</h4>
<form ng-submit="submit()">
<input type="text" name="data" ng-model="data" required>
<input type="submit" id="submit" value="Submit" />
</form>
<br />
<div ng-class="rangeColor" class="card">
<div class="item item-text-wrap">
This is a basic Card which contains an item that has wrapping text.
</div>
</div>
</div>
</body>
You could also implement the conditional statements in your HTML elements:
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
}
.card {
border-style: solid;
}
.red {
background-color: red;
}
.blue {
background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
<h4>Data:</h4>
<input type="text" name="data" ng-model="data" required>
<br />
<br />
<div ng-class="{'red': data <= 80, 'blue': data > 80}" class="card">
<div class="item item-text-wrap">
This is a basic Card which contains an item that has wrapping text.
</div>
</div>
</div>
</body>
You could use
ng-style
https://docs.angularjs.org/api/ng/directive/ngStyle
or
ng-class
I'm trying to develop a single web application which is a blog, displaying posts. They are included in a template by the ng-repeat directive:
<div class="post" data-ng-repeat="post in postList ">
<div class="date">published: {{post.published_at | date:'dd-MM-yyyy, HH:mm'}}</div>
<a class="btn btn-default" data-ng-click="editPost(post)"><span class="glyphicon glyphicon-pencil"></span></a>
<a class="btn btn-default" data-ng-click="deletePost(post)"><span class="glyphicon glyphicon-remove"></span></a>
<h1>{{post.title}}</h1>
<p>{{post.text}}</p>
</div>
</div>
They have fields, such as title, text and publishing date, defined in the controller. I'd like to filter them by various criteria. For this purpose, I tried to implement my own custom filter (so that I can filter by more than 1 field):
angular.module("blog").
filter('bytitle', function() {
return function(posts, title) {
var out = [];
// Filter logic here, adding matches to the out var.
var i;
for(i = 0; i < posts.length; i++){
if(posts[i].title.indexOf(title) >=0){
out.push(posts[i]);
}
}
return out;
}
});
however, if I run the javascript console, I get the following error, caused only by the presence of the code above:
Argument 'postController' is not a function, got undefined
I'm new to angular, and I'm not really sure what this means. Any ideas?
The entire source code: http://plnkr.co/edit/suATcx8dQXZqcmmwlc0b?p=catalogue
Edit 2: The problem is partially solved. I added this filter functionality:
<div class="post" data-ng-repeat="post in postList | bytitle : filterTerm">
but something goes wrong while running the script:
TypeError: Cannot read property 'length' of undefined
It occurs at line 7 (the one with posts.length).
in you file with filters instead angular.module("blog", []) you need angular.module("blog").
in first case - you create module in second - get.
see doc:
When passed two or more arguments, a new module is created. If passed only one argument, an existing module (the name passed as the first argument to module) is retrieved.
sidenote: in plunker you have wrong reference to js files
You have error with length property, because before loading posts by ajax, you not init this variables, so in filter passed undefined.
You can modify your filter like
angular.module("blog").
filter('bytitle', function() {
return function(posts, title) {
var out = [];
//if not pass posts - return empty
if(!posts) return out;
//if not pass title, or it empty - return same collection
if(!title) return posts;
// Filter logic here, adding matches to the out var.
var i;
for (i = 0; i < posts.length; i++) {
if (posts[i].title.indexOf(title) >= 0) {
out.push(posts[i]);
}
}
return out;
}
});
var app = angular.module("blog", []);
app.controller("postController", function($scope, $http, $timeout) {
var path = 'http://private-79b25-blogtt.apiary-mock.com';
$scope.titleFilter = "";
$scope.contentFilter = "";
$http.get(path + '/posts')
.success(function(data, status, headers, config) {
$timeout(function() {
$scope.postList = data;
});
})
.error(function(data, status, headers, config) {
console.log("error getting " + status);
});
$scope.form_header = "New post";
$scope.addPost = function() {
var post = {
title: $scope.title,
text: $scope.text,
published_at: new Date()
};
$http.post(path + '/posts', post)
.success(function(data, status, headers, config) {
$scope.postList.push(post);
})
.error(function(data, status, headers, config) {
console.log("error posting " + status);
});
$scope.title = "";
$scope.text = "";
};
$scope.deletePost = function(post) {
var del = confirm("Are you sure you want to delete or modify this post?");
if (del) {
var i = $scope.postList.indexOf(post);
$scope.postList.splice(i, 1);
}
};
var backupPostContent;
$scope.editPost = function(post) {
$scope.deletePost(post);
$scope.form_header = "Edit post";
$scope.title = post.title;
$scope.text = post.text;
backupPostContent = post;
};
$scope.cancelEdit = function() {
$http.post(path + '/posts', backupPostContent)
.success(function(data, status, headers, config) {
$scope.postList.push(backupPostContent);
$scope.form_header = "New post";
})
.error(function(data, status, headers, config) {
console.log("error posting " + status);
});
$scope.title = "";
$scope.text = "";
};
$scope.filter = function(term) {
}
});
angular.module("blog").
filter('bytitle', function() {
return function(posts, title) {
var out = [];
if(!posts) return out;
if(!title) return posts;
// Filter logic here, adding matches to the out var.
var i;
for (i = 0; i < posts.length; i++) {
if (posts[i].title.indexOf(title) >= 0) {
out.push(posts[i]);
}
}
return out;
}
});
#wrap {
width: 600px;
margin: 0 auto;
}
#left_col {
float: left;
width: 300px;
}
#right_col {
float: right;
width: 300px;
}
body {
padding: 0px 15px;
}
.row-centered {
text-align: right;
}
.page-header {
background-color: #cb892c;
margin-top: 0;
padding: 20px 20px 20px 40px;
}
.page-header h1,
.page-header h1 a,
.page-header h1 a:visited,
.page-header h1 a:active {
color: #ffffff;
font-size: 36pt;
text-decoration: none;
}
.content {
margin-left: 40px;
}
h1,
h2,
h3,
h4 {
font-family: Helvetica, sans-serif;
}
.date {
float: right;
color: #828282;
}
.save {
float: right;
}
.post-form textarea,
.post-form input {
width: 60%;
}
.top-menu,
.top-menu:hover,
.top-menu:visited {
color: #ffffff;
float: right;
font-size: 26pt;
margin-right: 20px;
}
.post {
margin-bottom: 70px;
}
.post h1 a,
.post h1 a:visited {
color: #000000;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="blog" ng-controller="postController">
<div id="wrap">
<div id="left_col">
<h3> Search </h3>
<p>
<input data-ng-model="filterTerm" />
</p>
</div>
<div id="right_col">
<div id="wrap">
<div id="left_col">
<input type="checkbox" value="topic" id="title" ng-model="titleFilter" />In topics
<br>
<input type="checkbox" value="content" id="content" />In contents
<br>
<input type="checkbox" value="content" id="content" />In tags
<br>Between
<input type="text" type="text" class="datepicker" />
</div>
<div id="right_col">
<br>
<br>
<br>and
<input type="text" type="text" class="datepicker" />
<br/>
</div>
</div>
</div>
</div>
<div class="content container" style="padding-top: 50px">
<div class="row">
<div class="col-md-8 col-centered">
<div class="post" data-ng-repeat="post in postList | bytitle : filterTerm ">
<div class="date">published: {{post.published_at | date:'dd-MM-yyyy, HH:mm'}}</div>
<a class="btn btn-default" data-ng-click="editPost(post)"><span class="glyphicon glyphicon-pencil"></span></a>
<a class="btn btn-default" data-ng-click="deletePost(post)"><span class="glyphicon glyphicon-remove"></span></a>
<h1>{{post.title}}</h1>
<p>{{post.text}}</p>
</div>
</div>
<div class="col-md-4 col-centered">
<h1>New post</h1>
<form class="post-form">
<h4>Title:</h4>
<p>
<input type="text" name="title" data-ng-model="title">
</p>
<h4>Text:</h4>
<p>
<textarea name="text" data-ng-model="text"></textarea>
</p>
<button type="submit" class="save btn btn-default" ng-click="addPost()">Save</button>
<button type="reset" class="btn btn-default">Clear</button>
<button type="button" class="btn btn-default" ng-click="cancelEdit()">Cancel edit</button>
</form>
</div>
</div>
</div>
</div>
EDIT
I didn't see the answer from #grundy before making my comments or edits, so it should be accepted as the answer, but I wanted to point out two things:
Working Plunker
My preferred approach is to use the angular.isDefined / angular.isArray:
angular.module("blog").
filter('bytitle', function() {
return function(posts, title) {
if(angular.isDefined(title) && angular.isArray(posts)) {
var out = [];
// Filter logic here, adding matches to the out var.
var i;
for(i = 0; i < posts.length; i++){
if(posts[i].title.indexOf(title) >=0){
out.push(posts[i]);
}
}
return out;
} else {
return posts;
}
}
});
Second, I just wanted to point out that while writing your own filters is sometimes necessary and certainly a great skill to master, the easiest way to filter on a single property is to use the built in filter filter by adding the property to the model value that you want to search on:
<input data-ng-model="filterTerm.title" />
<input data-ng-model="filterTerm.text" />
and then in your repeat add the filter using just the object name as follows:
<div class="post" data-ng-repeat="post in postList | filter: filterTerm ">
You can then use the same filter for multiple properties.