JS:
function ctrlr($scope, $http) {
$http.post(urlhere).success(function(data) {
$scope.Items = data;
});
}
HTML:
<body ng-app="">
<div ng-controller="ctrlr">
<div ng-repeat="item in Items">
{{ item.Name }}
</div>
</div>
</body>
Data returned from post request is a list of a class object (that contains Name property)
Checked, data is not empty.
It returns an xml formatted response.
Why won't my ng-repeat work? Tried using jquery ajax, which returned json but still no go
If you're running ng-repeat on a js object instead of array you should do something like this
<div ng-repeat="(key, val) in Items">
<span>{{key}}</span>
<span>{{val}}</span>
Well it may sound silly but the problem was that $scope.Items is being initialized in the success, an async method so it was undefined when it arrived to ng-repeat.
I solved it by switching to jquery ajax and adding async: false
Related
Here is the plunker link. I am trying to fetch the json data using Angularjs where data is like object of objects of array.
Plunker link with example
You need to iterate it over key and value in ng-repeat. check plunker
like
<div ng-repeat="(key, value) in questions">
{{key}}
<div ng-repeat="item in value">
version : {{item.version}}
</div>
</div>
your div tag is not closed properly....
<div ng-repeat="ques in questions">
<p>{{ques[0].version}}</p>
</div>
your ng-repeat div tag was closed before your tag.
Fixed Plunker Link
Plunker: for each sub version
Some code modifications as components properties are dynamic. hence, iterate it dynamic :
$scope.components = response.data.components;
$scope.questions = [];
for(var i in Object.keys($scope.components)) {
for(var j in $scope.components[Object.keys($scope.components)[i]]) {
$scope.questions.push($scope.components[Object.keys($scope.components)[i]][j]);
}
}
console.log($scope.questions);
});
updated Plnkr : https://plnkr.co/edit/PuvO6PrifWa5WtpeQrvY?p=preview
I was trying to collect JSON data from an API endpoint using AngularJS and that worked just fine. I was able to make list using the datas. Also tried to include an input to search. But the instant search with filter is not working. I double checked the syntax but seems like it is just fine. Any suggestions will be appreciated.
<label>Search: <input type="text" ng-model="search"> </label>
<div class="list-group">
<div ng-app="listBuilderFromJsonData" ng-controller="listDatasBootstrap">
<a href="#" class="list-group-item" ng-repeat="data in datas | filter:search">
{{data.title}}
</a>
</div>
</div>
<script>
var app= angular.module('listBuilderFromJsonData', []);
app.controller('listDatasBootstrap', function($scope, $http){
$http.get("https://api.end.point.url").then(function(response){
$scope.datas = response.data.items;
});
});
</script>
Place your ng-app at the root level. Here your textbox for search is outside ng-app
I want a live search: the results are queried from web api and updated as the user types.
The problem is that the list flickers and the "No results" text appears for a fraction of second, even if the list of results stays the same. I guess I need to remove and add items with special code to avoid this, calculating differences between arrays, etc.
Is there a simpler way to avoid this flicker at least, and probably to have possibility to animate the changes?
It looks like this now:
The html part is:
<div class="list-group">
<a ng-repeat="test in tests track by test.id | orderBy: '-id'" ng-href="#/test/{{test.id}}" class="list-group-item">
<h4 class="list-group-item-heading">{{test.name}}</h4>
{{test.description}}
</a>
</div>
<div ng-show="!tests.length" class="panel panel-danger">
<div class="panel-body">
No tests found.
</div>
<div class="panel-footer">Try a different search or clear the text to view new tests.</div>
</div>
And the controller:
testerControllers.controller('TestSearchListCtrl', ['$scope', 'TestSearch',
function($scope, TestSearch) {
$scope.tests = TestSearch.query();
$scope.$watch('search', function() {
$scope.tests = TestSearch.query({'q':$scope.search});
});
}]);
You should use ng-animate module to get the classes you need for smooth animation. For each ng-repeat item that's moved, added, or removed - angular will add specific classes. Then you can style those classes via CSS or JS so they don’t flicker.
An alternative way of doing what you require is to use the angular-ui bootstrap Typeahead component (check at the bottom of the post). It has a type-ahead-wait property in milliseconds and also a template url for customising it.
<div ng-app>
<div ng-controller="MyController">
<input type="search" ng-model="search" placeholder="Search...">
<button ng-click="fun()">search</button>
<ul>
<li ng-repeat="name in names">{{ name }}</li>
</ul>
<p>Tips: Try searching for <code>ann</code> or <code>lol</code>
</p>
</div>
</div>
function MyController($scope, $filter) {
$scope.names = [
'Lolita Dipietro',
'Annice Guernsey',
'Gerri Rall',
'Ginette Pinales',
'Lon Rondon',
'Jennine Marcos',
'Roxann Hooser',
'Brendon Loth',
'Ilda Bogdan',
'Jani Fan',
'Grace Soller',
'Everette Costantino',
'Andy Hume',
'Omar Davie',
'Jerrica Hillery',
'Charline Cogar',
'Melda Diorio',
'Rita Abbott',
'Setsuko Minger',
'Aretha Paige'];
$scope.fun = function () {
console.log($scope.search);
$scope.names = $filter('filter')($scope.names, $scope.search);
};
}
I am using $http.get to return a JSON array. If I simply echo the array it prints in the view fine. However, my ng-repeat container does not update.
To further confuse, I have a filter on the data which, when I filter for filename e.g. beginning with the number 1, suddenly they all appear (that match the filter anyway as they should).
Here's what I'm trying:
capApp.controller('myUploadedPhotos', function ($scope, $http) {
$http.get("http://myurl.com/ajax/myUploadedPhotos.php")
.success(function(response) {
$scope.photos = response;
});
});
<div ng-controller="myUploadedPhotos" class="container">
<h1>Hey {{photos}}</h1> <!-- this prints the array to the screen perfectly -->
<div class="photo" ng-repeat="x in photos | filter: { filename: nameFilter } | orderBy: order">
// this doesn't show any images until I filter
<img ng-src="/uploads/{{ x.filename }}" />
</div>
No errors anywhere by the way.
Any ideas how I could fix this?
UPDATE
It's clearly something to do with the filter, when I remove it, all works ok and images show.
This is the filter field:
<div>Filename: <input type="text" ng-model="nameFilter" /></div>
Should I be somehow setting this to "" on init?
i don't no how do i explain my question,
ok let me try,
How to pass value from another div with same controller name?
<div ng-controller="myCtrl">
<select ng-model="filterBy" ng-options="filtration.title for filtration in filter_preferences"></select>
</div>
---------------------------------------------------
<div ng-controller="myCtrl">
<select ng-model="filterBy" ng-options="filtration.title for filtration in filter_preferences"></select>
<ul>
<li ng-repeat="vals in datas | filter: vals.completed = filterBy.value">{{vals.title}}</li>
</ul>
</div>
From the second div when i filter i works fine, but the same filter i've applied on the top with same controller but it doesn't work.
DEMO PLUNKER
The problem is that under each ng-controller it's creating a new $scope. This means they don't share $scope at all, and there are two different controller instances as well.
So, to communicate between two controllers, the common practice is to use a service.
I've updated your plunk with a very basic example.
The idea is that you create a service like:
app.value('sharedData', { filteredBy: true});
Then inject it into your controller and put it on your scope like so:
app.controller('MyCtrl', function($scope, sharedData) {
$scope.sharedData = sharedData;
});
Then after that you'd use it as your ng-model value and your filter:
<select ng-model="sharedData.filteredBy" ng-options="x.value as x.title for x in filter_preferences"></select>
<ul>
<li ng-repeat="vals in datas | filter: { completed: sharedData.filteredBy }">{{vals.title}}</li>
</ul>
From there it will work because both controllers (and $scopes) now have an instance of the same object... your sharedData service.
You need to specify
ng-controller="myCtrl"
where the ng-app is and remove all the other ng-controller statements. This is because whenever you are trying to do ng-controller in individual div it is creating a local scope for that particular div and then any change in the dropdown is refreshing that local scope.
Code:
<body ng-app="myApp" ng-controller="myCtrl">
<div >
<select ng-model="$parent.filterBy" ng-options="filtration.title for filtration in filter_preferences"></select>
</div>
---------------------------------------------------
<div>
<select ng-model="$parent.filterBy" ng-options="filtration.title for filtration in filter_preferences"></select>
<ul>
<li ng-repeat="vals in datas | filter: vals.completed = $parent.filterBy.value">{{vals.title}}</li>
</ul>
</div>
</body>
Controller Code change donw:
$rootScope.filterBy = $scope.filter_preferences[1];
Earlier it was:
$scope.filterBy = $scope.filter_preferences[1];
UPDATE:
You can have the filterBy variable on the rootScope rather than the local scope. So that any changes to the local scope will be done at the root level and changes will reflect everywhere
Tried this in your plunker and it is working.
You could not mention controller twice under ng-app