I am new to AngularJS. I am trying to get a simple search based on the users name, which in my case is not stored on the top most layer. Here is the example:
<div ng-init="users = [
{'fields':{'name':'Mary Brown','person_nickname':'M'},'username':'mbrown'},
{'fields':{'name':'John Smith','person_nickname':'J-Dog'},'username':'jsmith'}]">
</div>
Here is the plnkr that searches all the fields I want to take this and make it such that it only searches fields.name. In this plunker, I could type "dog" and still get the second user returned, which is not what I want.
I tried changing my input ng-model to search.fields.name but when I do that, the search doesn't activate at all. I can type in any string into the text box and nothing is filtered out.
What am I missing? Thank you!
EDIT:
Full code since plunker is currently down:
<!doctype html>
<html ng-app="App">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div ng-init="users = [
{'fields':{'name':'Mary Brown','person_nickname':'M'},'username':'mbrown'},
{'fields':{'name':'John Smith','person_nickname':'J-Dog'},'username':'jsmith'}]">
</div>
Name only <input ng-model="search.fields"><br>
<table id="userTable">
<tr ng-repeat="user in users | filter:search">
<td>{{user}}</td>
</tr>
</table>
</body>
</html>
Plnkr is not running right now, but if you have an ng-repeat which you want to filter, then look at the official docs, especially upvoted comments are useful: http://docs.angularjs.org/api/ng.filter:filter
item in myArray | filter:{propertyThatWillBeFiltered: value}
If you are talking about searching inside your model, then you should use "filter" method on an array.
Related
Is it possible to create an array using ng-init dynamically?
The bellow code is not working
ng-init="medi_count = new Array(5)"
Angular expression is not same like JavaScript expression. It has some limits.!
No Object Creation With New Operator: You cannot use new operator in an Angular expression.
Refer Angular Documentation : Angular Expression
Sure you can its just the same way you create Arrays..
<!DOCTYPE html>
<html ng-app>
<head>
<script src="https://code.angularjs.org/1.4.9/angular.js"></script>
</head>
<body>
<div ng-init="names=[{name:'Shijin',city:'NewYork'}, {name:'John',city:'Montana'},{name:'Phillip',city:'California'}]">
<ul>
<font face="Impact" color="purple" size = "5"><li data-ng-repeat="Objects in names">{{Objects.name}} - {{Objects.city}}</li></font>
</ul>
</div>
</body>
</html>
ng-init is for loading data into an array, as other answer shows. If you just want a new empty array, then make it in the controller
$scope.medi_count = [];
You can do it pretty fine by calling a function
<div ng-init="medicount(5)">
where
$scope.medicount = function(someNumber){
//what you want
}
as answered in this question
I have created discussion forum application in angularjs. Once the user clicked the reply button on the post, I want to show the editor which is in the separate html file. How can I include that template on clicking the ng-click under that specific post.
How about a combination of ng-include with ng-if?
If you want to inject a template based on a certain condition, you can do it like this:
<div ng-include="'template.html'" ng-if="yourCondition"> </div>
where template.html is your filename and yourCondition should be an boolean expression.
Here is a plnkr to demonstrate: http://plnkr.co/edit/m50nKigoOWYwuczBIQdQ?p=preview
As suggested above we can use combination of ng-if and ng-include to achieve require functionality :
<html ng-app="includeApp">
<head>
<script type ="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script>
<script src="AppController.js"></script>
</head>
<body ng-controller="AppCtrl">
<button ng-click="injectReply()">Include Reply</button>
<div ng-include="'reply.html'" ng-if="isReplyIncluded"></div>
</body>
</html>
Now code containing AppController.js :
angular.module('includeApp',[])
.controller('AppCtrl',['$scope',function($scope){
$scope.isReplyIncluded=false;
$scope.injectReply= function (){
//add reply.html by making this variable true
$scope.isReplyIncluded=true;
}
}]);
Reply.html
<div>
You can add your editor html content here
</div>
I have a select cascade, but I currently can't capture the first selected option, only the one of the second select.
I want to capture the two options selected by the user when the second selection is changed, so I could send this information to an asynchronous request.
HTML code:
<!DOCTYPE html>
<html ng-app>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js"></script>
<script>
function ListDropdown($scope){
$scope.ccvms={lista01:['1','3','5','7','9'],lista02:['2','4','6','8','10']}
$scope.send=function(x){
console.log(x)
}
}
</script>
</head>
<body>
<div ng-controller="ListDropdown">
<select ng-model="nums" ng-options="ccvm for (ccvm, nums) in ccvms"></select>
<select ng-disabled="!nums" ng-model="num" ng-options="num for num in nums" ng-change="send(num)"></select>
</div>
</body>
</html>
You'll need to make the first select's model to be the key (rather than the value), and then use obj[key] as the source of the second ng-options.
<select ng-model="ccvm"
ng-options="ccvm as ccvm for (ccvm, nums) in ccvms"></select>
<select ng-model="num"
ng-disabled="!ccvm"
ng-options="num for num in ccvms[ccvm]"
ng-change="send(num, ccvm)"></select>
So I'm trying to zebra stripe my ng-repeat so the rows can be easily distinguished.
I think I have everything wired up correctly, but the classes just aren't being applied.
I've created a plunker here.
My html looks like this:
<div ng-repeat="removal in removals" ng-class-even="even" ng-class-odd="odd" class="remove-relation-titles-list">
<div class="pull-left relation-titles-left-list">
<span class="acct-title acct-num">{{removal.AcctType}} {{removal.AcctNo}}</span>
<span class="acct-title"> - Standard Checking</span>
</div>
</div>
So, the regular class is being applied just fine, but the even and odd ones aren't at all. If you inspect the object and add the even class yourself, it shows up beautifully. I've tried moving this down to the div inside the ng-repeat with no results.
Am I missing something obvious?
Change your ng-class to:-
ng-class="{'even':$even,'odd':$odd}"
Plnkr
$even and $odd are the properties added by ng-repeat on its scope.
or change it to take string value of the class names otherwise it will try to replace the class based on the property even or odd which does not exist:-
ng-class-odd="'odd'" ng-class-even="'even'"
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js" data-semver="1.2.17" data-require="angular.js#1.0.7"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="removeTitlesCtrl">
<div id="body_content_wrapper">
<div>
<h4 class="heading toggle header-block">These are the accounts chosen</h4>
</div>
<div ng-repeat="removal in removals" ng-class-even="'even'" ng-class-odd="'odd'" class="remove-relation-titles-list">
<div class="pull-left relation-titles-left-list">
<span class="acct-title acct-num">{{removal.AcctType}} {{removal.AcctNo}}</span>
<span class="acct-title"> - Standard Checking</span>
</div>
</div>
</div>
</div>
</body>
</html>
This is a simple mistake please correct.
ng-class-even="'even'" ng-class-odd="'odd'"
I am displaying smart table using ng-show and sg-hide ..condition is data is null then hiding table and data existed showing table. It is working every time page fresh load, but I want to apply if emptied the table by deleting rows. angularjs and smarttable are resources
At first load it is following ng-hide and ng-show to display table or other div. If no data to display then I am hiding, else data existed I am showing when I emptied all rows by delete row action then after all rows deleted... then ng-hide is not working I am using angularjs and smarttable
HTML
<div `enter code here`ng-hide="hasdata"->
<smarttable></smarttable>
</div>
<div `enter code here`ng-show="hasdata">
NO data to disply
</div>
Controller
$scope.columncollection;$scope.rowcollection and using http to get data and fill rowcollection object. and we r deleting row by using custom directive. At first load if data length is zero it works fine but row deleted then its not hiding.
Your table is not getting hidden because, you probably have not changed the value of hasdata to false after you delete the table contents.
Try this,
In html,
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js#1.0.7" data-semver="1.0.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="smart-table.js"></script>
<script src="script.js"></script>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet">
</head>
<body ng-controller="mainCtrl">
<h1>{{greetings}} Plunker!</h1>
<div ng-show="hasdata">
<smart-table config="globalConfig" columns="columnsConfig" rows="items"></smart-table>
</div>
</body>
</html>
In Js file,
var app=angular.module('myApp',['smartTable.table']);
app.controller('mainCtrl',['$scope',function(scope){
scope.greetings='hello';
scope.hasdata=true;
scope.doDelete = function(index) {
// alert("index "+index);
scope.items.splice(index,1);
if(scope.items.length===0){
//alert("scope.items.length "+scope.items.length);
scope.hasdata=false;
}
}
scope.items=[
{name:'mahesh',lastName:'kumar'},
{name:'sachin',lastName:'ramesh'},
{name:'varun',lastName:'gupta'},
{name:'vijay',lastName:'kumar'},
{name:'prem',lastName:'raj'},
{name:'gandhi',lastName:'gandhi'},
{name:'sathish',lastName:'kumar'},
{name:'ram',lastName:'prasad'},
{name:'siva',lastName:'guru'},
{name:'dilli',lastName:'ganesh'}
];
scope.globalConfig={
isPaginationEnabled:false,
selectionMode:'single'
};
scope.columnsConfig=[
{label:'name',map:'name'},
{label:'last Name',map:'lastName'},
{label:'actions',cellTemplateUrl:'delete.html'}
];
}])
In delete.html,
<button ng-click="$parent.$parent.$parent.$parent.doDelete(displayedCollection.indexOf(dataRow))"
class="btn btn-xs btn-primary">
Delete
</button>
Have a look at the working demo in plunker
Hope this solves your problem :)
If you are sure that the hide condition is true (data is null) after deleting all the table rows, something you can check by logging (console.log) the condition after each row delete, then you probably just need to perform a $scope.apply() or $scope.digest() to ensure your view is updated.
If you add your code to the question then it will be easier to give you a more complete answer.
You probably have to wrap the code deleting rows in an $apply call.
$scope.$apply(function() {
//delete rows here
})