We Keep Coding

How to display a single object from response.data?

Foloowing is my controller for displaying single book details from collection of json records
.controller('BookDetailsController', ['$scope','$http','$stateParams',function($scope,$http,$stateParams){
$http({
url: "/api/books/",
method: "get",
params: {id: $stateParams.id}
}).then(function(response){
$scope.books = response.data;
console.log($scope.books);
})
}]);
<div class="panel panel-default">
<div class="panel-heading">Online Bookstore</div>
<div class="panel-body">
<div class="col-md-12">
<div class="col-md-3">
<img src="{{book.imgUrl}}" class="img-thumbnail" width="200" height="200">
</div>
<div class="col-md-9">
<h2>{{book.title}}</h2>
<p style="text-align:justify;">{{book.description}}</p>
</div>
</div>
<hr>
</div>
</div>
How to display single book record from response.data; using above controller

If $scope.books is an array, you can
1) Loop over the array to display all books
<div ng-repeat="b in books">
{{b.title}}
<img ng-src="{{b.imgUrl}}"
...
</div>
2) Display only one book from its position in the array
<h1>First book</h1>
{{books[0].title}}
<img ng-src="{{books[0].imgUrl}}"/>

Just take the first object inside the data,
$scope.book = response.data[0];

Loop through the books in the outer <div>:
....
<div class="col-md-12" ng-repeat="book in books">
....
To display a single record (say for index 0), simple use books[0] in the view:
..
<img src="{{books[0].imgUrl}}" class="img-thumbnail" width="200" height="200">
</div>
<div class="col-md-9">
<h2>{{books[0].title}}</h2>
<p style="text-align:justify;">{{books[0].description}}</p>
</div>

if $scope.books is an array then you can use the ng-repeat as the above code by #mistails. it will simply create an list of books dynamically . and from the list you can select particular book and you can pass the id to fetch the book's whole data.
<div ng-repeat="b in books" data-ng-click="showBookData(b)">
{{b.title}}
<img ng-src="{{b.imgUrl}}"
...
</div>
showBookData()
on the click you can open a modal and show the total details.

Connecting two NG-Repeats

i have two ng-repeats that i would like to connect together using their unique id. The idea is that you click a movie poster and the corresponding streaming video will come up the screen above using CSS hide/show. This is what i have so far:
<div class="contentContainer" ng-app="webtest">
<div class="" ng-controller="LandingPageController">
<div class="videoContainer" ng-repeat="movie in movies" >
<video width="800" controls>
<source src="{{movie.stream}}" type="video/mp4">
</video>
</div>
<div class="moviesContainer">
<div class="movieCell" ng-repeat="movie in movies">
<a href="#tab{{movie.id}}">
<img class="movieCellImage" src="content/images/moviePosters/{{movie.images.cover}}">
<div class="movieCellImageBackground">
<div class="movieCellTitle">{{movie.title}} {{movie.id}}</div>
</div>
</a>
</div>
</div>
</div>
</div>

If you use Angular, you don't have to/ should use jQuery.
Angular allows you to handle click event with ng-click.
To your <a> add ng-click="select_video(movie.id)" (you can also remove href).
And you controller should look like this:
var app = angular.module('{your-app-id}', []);
app.controller('LandingPageController', function ($scope) {
$scope.selected_id = null;
$scope.movies = (...) /* The array of movies. */
$scope.select_video = function(id) {
$scope.selected_id = id;
};
});
Then, to every .videoContainer > * add ng-if="selected_id == movie.id".
Should work, let me know if it doesn't.
EDIT:
Also reorganize your HTML like this:
<div ng-controller="...">
<div class="videoContainer" ng-repeat="...">
<div ng-if="...">
<!-- <video /> here, and stuff visible only if this video is selected -->
</div>
<!-- Your <a /> -->
</div>
</div>

You don't need 2 loops. Create a reference to selected item, and set it up in the loop like:
<a ng-click="selectedMovie = movie">...</a>
Let then angular do everything for you.
<div ng-controller="LandingPageController">
<video width="800" controls>
<source src="{{selectedMovie.streams[0].url}}" type="video/mp4">
</video>
<div class="newscontainer">{{selectedMovie.id}} CLICKED</div>
<div class="moviesContainer" id="tabs">
<div class="movieCell" ng-repeat="movie in movies">
<a ng-click="selectedMovie = movie">
<img class="movieCellImage" src="content/images/moviePosters/{{movie.images.cover}}">
<div class="movieCellImageBackground">
<div class="movieCellTitle">{{movie.title}} {{movie.id}}</div>
</div>
</a>
</div>
</div>
</div>
EDIT:
Not tested, may not work. If so, try <a ng-click="$parent.selectedMovie = movie">...</a>

ng-repeat: prevent changing of information in previous panels

So, the issue is:
I have an HTML structure here:
<div class="container-fluid" ng-click="goto(item.title)" ng-repeat="item in someResponse" data-toggle="collapse" data-parent="accordion"
data-target="#collapseone_{{ $index }}" aria-expanded="false" aria-controls="#collapseone">
<div class="panel-group" id="accordion">
<div class="panel panel-info">
<div class="panel-heading">
<div class="wrap">
<img class="img" ng-src="{{item.img_url}}">
<p>{{item.title}}</p>
<p>{{item.price | currency}}</p>
<p>{{item.summary}}</p>
</div>
</div>
<div id="collapseone_{{ $index }}" class="panel-collapse collapse" ng-model="collapsePanel">
<div class="panel-body">
<div>
<p>{{IdResponse.price | currency}}</p>
<p>{{IdResponse.title}}</p>
<img class="img" ng-src="{{IdResponse.img_url}}">
<p>{{IdResponse.summary}}</p>
<p>Bathrooms:{{IdResponse.bathroom_number}}</p>
<p>Bedrooms:{{IdResponse.bedroom_number}}</p>
<input type="button" value="favourites" ng-click="goto1()">
</div>
</div>
</div>
</div>
</div>
And its controller:
angular
.module('PropertyCross')
.controller('searchResultsCtrl', ['$scope', '$http', '$location', 'myService',
function ($scope, $http, $location, myService) {
$scope.someResponse = myService.getData();
console.log($scope.someResponse);
$scope.goto = function (id) {
myService.setID(id);
console.log(id);
$scope.IdResponse = myService.getID();
console.log($scope.IdResponse);
};
$scope.goto1 = function () {
myService.setFav($scope.IdResponse);
}
}
]);
When I click on one collapse panel I have the right data coming from the back, but the problem appears when I try to open two or more panels. As a result I have the same things on all opened panels.
How can I prevent the changing of information in previous panels?

You could have the service push the data back into to the someResponse model. That way all of the price and detail information just extends the general listing. and since it is living within your ng-repeat the two-way binding will render the info.
Just change this code to this.. I'm not sure if the id below is a unique id from a database or the id within the array which is part of the response. if you have both you can use this code...
$scope.goto = function (id, arrayIndex) {
myService.setID(id);
console.log(id);
$scope.someResponse[arrayIndex].IdResponse = myService.getID();
console.log($scope.someResponse[arrayIndex].IdResponse);
};
So, you are storing the information into an object within the original model. What you were doing was storing everything in one data model. So, whenever you updated it, the two way binding updated and cascaded to the two references (in both expanded panels).
Next, you would update your ng-repeat and ng-click to this:
<div class="container-fluid"
ng-click="goto(item.title, index)"
ng-repeat="(index, item) in someResponse"
data-toggle="collapse" data-parent="accordion"
data-target="#collapseone_{{ $index }}"
aria-expanded="false" aria-controls="#collapseone">
and finally update the curly braces in the panels to something like this:
<div id="collapseone_{{ $index }}"
class="panel-collapse collapse" ng-model="collapsePanel">
<div class="panel-body">
<div ng-show="item.IdResponse">
<p>{{item.IdResponse.price | currency}}</p>
<p>{{item.IdResponse.title}}</p>
<img class="img" ng-src="{{item.IdResponse.img_url}}">
<p>{{item.IdResponse.summary}}</p>
<p>Bathrooms:{{item.IdResponse.bathroom_number}}</p>
<p>Bedrooms:{{item.IdResponse.bedroom_number}}</p>
<input type="button" value="favourites" ng-click="goto1()">
</div>
</div>
</div>
And I added an ng-show="item.IdResponse" so that the formatting wont show up until there is an object returned from the server.
I hope this answers your question.

HTML tags showing in AngularJS

I have an app which is pulling in data from another site using the Wordpress plugin WP-API.
I'm suing AngularJS to then display this information, I'm really new to AngularJS so my problem is that the correct information is being pulled in from the posts but HTML tags are showing such as <p>text</p>.
I'm pulling in data like this (a snippet of my code)-
<script>
var app = angular.module('myApp', []);
app.controller('aLlCtrl', function($scope, $http) {
var url = 'http://scd.blaze.wpengine.com/wp-json/posts?type=listings&filter[listing_area]=channel';
$http.get(url).then(function(data) {
$scope.data = data.data;
});
});
</script>
<body ng-app="myApp">
<!--SHOOTING TYPE-->
<div id="All" class="descshoot">
<div ng-controller="aLlCtrl">
<div ng-repeat="d in data">
<h2 class="entry-title title-post">{{d.title}}</h2>
<div id="listing-image"><img src="{{d.acf.logo}}"></div>
<div id="listing-contact">Contact: {{d.acf.contact}}, {{d.acf.position}}</div>
<div id="listing-address-1">
{{d.acf.address_1}}, {{d.acf.address_2}} {{d.acf.address_3}} {{d.acf.town}} {{d.acf.county}} {{d.acf.postcode}}
</div>
<div id="listing-phone">Telephone: {{d.acf.telephone}}</div>
<div id="listing-mobile">Mobile: {{d.acf.mobile}}</div>
<div id="listing-email">Email: {{d.acf.email}}</div>
<div id="listing-website">Website: {{d.acf.website}}</div>
<div id="listing-established">Established: {{d.acf.established}}</div>
<div id="listing-about">About: {{d.acf.about}}</div>
<div id="listing-mailingaddress">Mailing Address: {{d.acf.mailing_address_}}, {{d.acf.mailing_address_2}}, {{d.acf.mailing_address_3}}, {{d.acf.mailing_town}}, {{d.acf.mailing_county}}, {{d.acf.mailing_postcode}}</div>
<div id="listing-directions">Directions: {{d.acf.directions}}</div>
<div id="scd-link">View on The Shooting Club Directory</div>
</div>
</div>
</div>
</body>
And here is a (non-working) pen of my code - http://codepen.io/anon/pen/yePYdq and the site where it's working http://dev.5874.co.uk/goshooting/regions/channel-islands/
Any help would be much appreciated,
Thanks!

You need to use ng-bind-html attribute: JSFiddle
DOCUMENTATION
HTML:
<div ng-app="myApp" ng-controller="myCtrl">
{{test}} <!--will show '<p>test</p>'-->
<div ng-bind="test"></div> <!--will show '<p>test</p>'-->
<div ng-bind-html="test"></div> <!--will show 'test'-->
</div>
JS:
angular.module("myApp", ["ngSanitize"])
.controller("myCtrl", function($scope) {
$scope.test = "<p>test</p>";
});
Note: Don't forget to include ngSanitize to your module.

Why is a dynamic input value not showing a change with Angularjs?

I have a input with ng-model="articleTitle" and a div with {{articleTitle. When someone types in the input the div is updated.
However, I have a box that lists all the articles with <div class="element">...</div> around them. When a person clicks a list div I want the input to update then in turn the div that shows the title.
Everything works if I type in the input box. However, selecting an article does update the input box but not the div. If I add anything into the input box the div does update.
How, can I tell Angularjs that the input changed without interacting direction with the input?
----- edit -----
per request I've added some relevant code. This also include suggestions by mohamedrias :
html:
<html xmlns="http://www.w3.org/1999/xhtml" class="wp-toolbar ng-scope" lang="en-US" ng-app="coverEditor">
...
<div class="feature box" ng-controller="featureBox">
<div class="item">
<div class="edit">
<img src="/edit-image" />
<div class="form-elements">
<p class="title">Feature Settings</p>
<div class="element">
<p class="select-trigger">Article</p>
<div class="select-box" id="set-article">
<p class="title">Select Article</p>
<div class="element current" data-value="11">Test Article</div>
</div>
</div>
<div class="element">
<input type="text" name="feature" id="feature" ng-model="article.featureTitle" class="article-title" placeholder="Title" />
</div>
...
</div>
</div>
<div class="item-content featureBackColor">
<h1>{{article.featureTitle}}</h1>
</div>
</div>
</div>
angular-scripts.js (loads in header)
var coverEditor = angular.module("coverEditor",['ngRoute']);
coverEditor.controller('featureBox',function($scope){
$scope.article = {};
});
admin.js (jquery that loads in the footer)
$('#set-article .element').click(function(){
var articleElement = $(this);
var articleTitle = articleElement.text();
$('#theme-layout .element').removeClass('current');
articleElement.addClass('current');
articleElement.closest('.form-elements').find('.article-title').val(articleTitle);
});
The purpose of the jquery is to get values/text from the selected article and place it in the input changing the value and hopefully updating the title via angular.
----- edit -----
code update
html:
<html xmlns="http://www.w3.org/1999/xhtml" class="wp-toolbar ng-scope" lang="en-US" ng-app="coverEditor">
...
<div class="feature box" id="featureBox" ng-controller="featureBox">
<div class="item">
<div class="edit">
<img src="/edit-image" />
<div class="form-elements">
<p class="title">Feature Settings</p>
<div class="element">
<p class="select-trigger">Article</p>
<div class="select-box" id="set-article">
<p class="title">Select Article</p>
<div class="element current" data-value="11">Test Article</div>
</div>
</div>
<div class="element">
<input type="text" name="feature" id="feature" ng-model="article.featureTitle" class="article-title" placeholder="Title" />
</div>
...
</div>
</div>
<div class="item-content featureBackColor">
<h1>{{article.featureTitle}}</h1>
</div>
</div>
</div>
angular-script.js:
var coverEditor = angular.module("coverEditor",['ngRoute']);
coverEditor.controller('featureBox',function($scope){
$scope.article = {};
//set artcle
jQuery('#set-article .element').click(function(){
var articleElement = jQuery(this);
var articleTitle = articleElement.text();
var scope = angular.element("#featureBox").scope();
jQuery('#theme-layout .element').removeClass('current');
articleElement.addClass('current');
articleElement.closest('.form-elements').find('.article-title').val(articleTitle);
scope.$apply();
});
});

Updated based on comment
As you're out of angular scope and changing the value in Jquery.
You must use $scope.$apply() after the jquery statement which sets the value.
$('#set-article .element').click(function(){
var articleElement = $(this);
var articleTitle = articleElement.text();
$('#theme-layout .element').removeClass('current');
articleElement.addClass('current');
articleElement.closest('.form-elements').find('.article-title').val(articleTitle);
$scope.$apply();
});
Assuming you're doing it in link function of directive or inside the controller.
If you're completely out of angular scope, then use
var scope = angular.element(document.querySelector(".feature.box")).scope();
scope.$apply();
// change the selector based on your controller
So your code will be:
$('#set-article .element').click(function(){
var articleElement = $(this);
var articleTitle = articleElement.text();
$('#theme-layout .element').removeClass('current');
articleElement.addClass('current');
articleElement.closest('.form-elements').find('.article-title').val(articleTitle);
var scope = angular.element(document.querySelector(".feature.box")).scope();
scope.$apply();
});