So I have this problem with creating a new view. The routeing works just fine because it shows the required HTML perfectly, but the expressions which worked just fine in the main view don't show up in the new.
<a href="#/view/{{todo.id}}" id="super" ng-repeat="todo in todos | filter: search">
<div id="main" ng-class="{'done': todo.done}">
<input type="checkbox" ng-model="todo.done" />
<span>{{todo.title}}</span>
<button id="info">i</button>
<div class="inf">
<span>Prioritás: {{todo.priority}}</span>
</div>
<div class="inf" id="sec">
<span>Határidő: {{todo.deadLine | date: "yyyy. MMMM. dd"}}</span>
</div>
</div>
</a>
These are the expressions in the main view, they work like a charm.
myTodoList.config(['$routeProvider', function($routeProvider, $locationProvider) {
$routeProvider
.when('', {
templateUrl: 'index.html',
controller: "mainController"
})
.when('/view/:id', {
templateUrl: 'view.html',
controller: "mainController"
}).otherwise({
redirectTo: ''
});
This is the routeing part, this is working.
<div id="mainContent">Master Detail
<div ng-controller="mainController" ng-view></div>
</div>
This is the div where the new view goes.
<div>
<p>Should be the ID: {{todo.id}}</p>
<p> should be the title: {{todo.title}}</p>
<p> this works: {{1+2}}</p></div>
And this is the view.html. The third expression is working, so I have the problem with de other two expressions. I think I messed up this because I can't reach the data I want. todo.id and todo.title are data created by a function in real time.
$scope.addTodo = function(title, priority, deadLine, id) {
$scope.todos.push({
'id': lastId,
'title': $scope.newTodo,
'done': false,
'priority': $scope.newPriority,
'deadLine': $scope.newDeadLine
});
$scope.newTodo = ''
$scope.newPriority = ''
$scope.newDeadLine = ''
lastId++;
}
This is the function I am using. I hope I described the problem well.
Are you using ng-repeat in your new view ?
<div>
<p>Should be the ID: {{todo.id}}</p>
<p> should be the title: {{todo.title}}</p>
<p> this works: {{1+2}}</p></div>
Your Scope variable name is $socpe.todos but here you are trying to access todo make sure if you are inside the ng-repeat if this is not your problem then share your full code on fiddle or codepen.
Just like Jeyenthaaran Nanjappan said, i think your div should look like this:
<div ng-repeat="todo in todos">
<p>Should be the ID: {{todo.id}}</p>
<p> should be the title: {{todo.title}}</p>
<p> this works: {{1+2}}</p>
</div>
Okay, I solved the problem. I needed to separate the different objects. So I made a function.
$scope.currentTodo = $scope.todos[0];
$scope.selectTodo = function(todo) {
$scope.currentTodo = todo;
}
I made a div and called this function with it.
<div ng-click="selectTodo(todo);" id="super" ng-repeat="todo in todos | filter: search">
And the problematic div now looks like this.
<div id="mainContent">Master Detail
<div>
<p>Should be the ID: {{currentTodo.id}}</p>
<p> should be the title: {{currentTodo.title}}</p>
</div>
</div>
Thank you for your help! I think both of you helped me through this problem.
Some issues in the nesting of the div and html. Change this:
<div id="mainContent">Master Detail
<div ng-repeat="todo in todos" ng-controller="mainController" ng-view></div>
<p>Should be the ID: {{todo.id}}</p>
<p> should be the title: {{todo.title}}</p>
<p> this works: {{1+2}}</p>
</div>
to this:
<div id="mainContent">Master Detail
<div ng-repeat="todo in todos" ng-controller="mainController">
<p>Should be the ID: {{todo.id}}</p>
<p> should be the title: {{todo.title}}</p>
<p> this works: {{1+2}}</p>
</div>
</div>
Related
I am learning to use vue js with wprest api by following watch-learn tutorials on the same topic. the problem is that the vue js version used in the tutorial seems to be v 1.x and i started using vue js 2.x. I was able to figure out the initial stages on how to display all the post using vue js 2.x.. I have an input field using which I search for a specific title it should filter and show the post. The issue is unable to workout exactly how it needs to be computed using vuejs 2.x.. I have included a codepen link containing the json data as well as my working code.
the following is the input field to be used to filter the posts by title
<div class="row">
<h4>Filter by name:</h4>
<input type="text" name="" v-model="nameFilter">
</div>
<div class="row">
<div class="col-md-4" v-for="post in posts">
<div class="card post">
<img class="card-img-top" v-bind:src="post.fi_300x180" >
<div class="card-body">
<h2 class="card-text">{{ post.title.rendered }}</h2>
<small class="tags" v-for="category in post.cats">{{ category.name }}</small>
</div>
</div> <!-- .post -->
</div> <!-- .col-md-4 -->
</div> <!-- .row -->
https://codepen.io/dhivyasolomon/pen/LdZKJY
I would appreciate any help in figuring out the next step. thanks.
You don't need directives, achieve this using the power of Computed properties
So you will have to itarate over the computed property which filter the posts by the input value and return a new array of posts.
Little example:
new Vue({
el: '#example',
computed: {
filteredPosts () {
return this.posts.filter(p => p.title.toLowerCase().includes(this.filterText.toLowerCase()))
}
},
data () {
return {
filterText: '',
posts: [
{
title: 'My first post title',
body: 'foo'
},
{
title: 'Another post title',
body: 'foo'
},
{
title: 'This will work fine',
body: 'foo'
},
{
title: 'Omg it\'s working!',
body: 'foo'
}
]
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.15/vue.js"></script>
<div id="example">
<input type="text" v-model="filterText" />
<ul>
<li v-for="post in filteredPosts">{{ post.title }}</li>
</ul>
</div>
I'm new to front-end web development. I am creating checkboxes dynamically using AngularJS.
<div ng-repeat="x in Brands" style="margin-left: 20px">
<input type="checkbox" ng-model="newObject[x.product_brand]">
<label> {{ x.product_brand }} </label>
</div>
Following the methods given on the links below, I want to hide/show divs using
using the dynamically created checkboxes.
Dynamic ng-model
ng-show
Here's the code-
<div class="item panel panel-default" ng-repeat="x in Brands" ng-show="newObject[x.product_brand]">
<div class="panel-heading">
{{x.product_brand}}
</div>
<div class="panel-body">
</div>
</div>
Controller-
app.controller('BrandController', function($scope, $http) {
getProductsInfo();
function getProductsInfo() {
$http.get("sql.php").success(function(data) {
$scope.Brands = data;
});
};
});
But it is not working. Checking/Unchecking the checkboxes does nothing.
I think you need something like this runnable fiddle. This kind of handle is easy to manage with AngularJS. Welcome =) !!! Please note: The $timeout is to simulate your async $http request - its not a part of the solution.
View
<div ng-controller="MyCtrl">
<div ng-repeat="x in Brands" style="margin-left: 20px">
<input type="checkbox" ng-model="x.active">
<label> {{ x.product_brand }} </label>
</div>
<div class="item panel panel-default" ng-repeat="x in Brands" ng-show="x.active">
<div class="panel-heading">
{{x.product_brand}}
</div>
<div class="panel-body">
</div>
</div>
</div>
AngularJS demo application
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl', function ($scope, $timeout) {
$scope.Brands = [];
init();
function init () {
$timeout(function () {
$scope.Brands = [{
product_brand: 'brand 1'
},{
product_brand: 'brand 2'
},{
product_brand: 'brand 3'
},{
product_brand: 'brand 4'
}];
});
}
});
Probably it is not working because you never defined newObject on the $scope. So actually you are trying to access undefined[x.product_brand].
Something like $scope.newObject = {}; in your Controller should do the trick.
I have a $scope.movies with 6 objects inside. On my template I use a ng-repeat to show the content. Which looks like this.
The movie_container divs are created by doing a "ng-repeat" = "movie in movies".
<div id="watchlist">
<div class="movie_container"> Movie Title </div>
<div class="movie_container"> Movie Title </div>
<div class="movie_container"> Movie Title </div>
<div class="movie_container"> Movie Title </div>
<div class="movie_container"> Movie Title </div>
<div class="movie_container"> Movie Title </div>
</div>
What I would like to do is wrap every 3 items in a container div so that the result would be,
<div id="watchlist">
<div class="movie_wrap">
<div class="movie_container"> Movie Title </div>
<div class="movie_container"> Movie Title </div>
<div class="movie_container"> Movie Title </div>
</div>
<div class="movie_wrap">
<div class="movie_container"> Movie Title </div>
<div class="movie_container"> Movie Title </div>
<div class="movie_container"> Movie Title </div>
</div>
</div>
Would something like this be possible to create with angular or javascript?
The $scope.movies array looks like this, (this is obviously example data, but it looks like this).
$scope.movies = [
{
title: 'Star Wars',
release_date: '10-11-2015',
movie_id: '3381',
link: 'ePbKGoIGAXY'
}, {
title: 'Spectre',
release_date: '25-12-2015',
movie_id: '3371',
link: 'KlyknsTJk0w'
}, {
title: 'Revenant',
release_date: '02-03-2016',
movie_id: '3361',
link: 'nyc6RJEEe0U'
},
{
title: 'Star Wars',
release_date: '10-11-2015',
movie_id: '3351',
link: 'zSWdZVtXT7E'
}, {
title: 'Spectre',
release_date: '25-12-2015',
movie_id: '3441',
link: 'ePbKGoIGAXY'
}, {
title: 'Revenant',
release_date: '02-03-2016',
movie_id: '3331',
link: 'Lm8p5rlrSkY'
}
];
I would split the movies in the controller and then loop over the groups so I don't need to much logic in the view.
controller:
var i,j,temparray,chunk = 3, movieGroups=[];
for (i=0,j=movies.length; i<j; i+=chunk) {
temparray = movies.slice(i,i+chunk);
movieGroups.push(temparray);
}
$scope.movieGroups = movieGroups;
markup:
<div class="movie_wrap" ng-repeat="movieGroup in movieGroups">
<div class="movie_container" ng-repeat="movie in movieGroup">{{movie.title}}</div>
</div>
You can write a function that will split them into an array of objects for you, it will make it much easier for you. See here
Fiddle example : http://jsfiddle.net/U3pVM/20670/
Something like this :
$scope.sortMoviesForWrapper = function() {
$scope.sortedMovies = [];
while ($scope.movies.length > 0)
$scope.sortedMovies.push({"movies" : $scope.movies.splice(0, 3)});
};
//invoke function immediately (you can change when you do this if you need)
$scope.sortMoviesForWrapper();
I turn movies into sortedMovies with the function sortMoviesForWrapper and invoke it immediately then use the repeat on sortedMovies instead like so :
<div class="movie_wrap" ng-repeat="movieWrappers in sortedMovies">
<div class="movie_container" ng-repeat="movie in movieWrappers.movies">
{{movie.link}}
</div>
</div>
I used the movie.link so you can see they are unique. This is the basic idea. You can modify how you see fit. I created an array that has objects inside that has "movies" key for all your movies to make it easier to repeat over in the template. You don't have to use an object, or a key of movies for that matter, I just personally prefer working with it that way.
Just keep in mind, if your $scope.movie object changes, you will have to rerun this function. Hope this helps.
I'm trying to use Angular's search filter in the following way and cannot figure out what I am doing wrong.
This application should be able to use the search input to search all manufacturer names and items from the controller.
I know it is working somewhat correctly because my browser shows the image and manufacturer.name of both objects: manufacturer1 and manufacturer2, but it is not showing the items and the search function doesn't work.
Help is greatly appreciated! I'm pretty new to Angular.
<div ng-controller="SearchCtrl">
<input type="search" ng-model="search" class="form-control" placeholder="Search Manufacturers, Solutions, Equipment, Etc.">
<manufacturer info="manufacturer1"></manufacturer>
<manufacturer info="manufacturer2"></manufacturer>
</div>
Controller:
app.controller('SearchCtrl', ['$scope', function ($scope) {
$scope.manufacturer1 = {
name: 'Business Name',
items: [
'service1',
'service2',
'service3'
],
image: 'assets/images/image.png'
};
$scope.manufacturer2 = {
name: 'Other Business',
items: [
'product1',
'product2',
'product3'
],
image: 'assets/images/image.png'
};
}]);
Directive JS
app.directive('manufacturer', function() {
return {
restrict: 'E',
scope: {
info: '='
},
templateUrl: 'assets/js/directives/manufacturer.html'
};
});
Directive Template:
<div class="col-md-4">
<h2 class="business-title">{{ info.name }}</h2>
<img ng-src="{{ info.image }}" class="feature-img" alt="image"/>
<ul>
<li ng-repeat="item in items | filter:search">
{{ info.items }}
</li>
</ul>
</div>
As manufacturer directive has isolated scope, so you couldn't have access to search variable inside your directive you need to pass the search variable to the directive from the directive attribute & include that property inside directive isolated scope, as you have done for the info variable.
Basically you need to add serach: '=' inside your directive isolated scope, which will pass the search input box value to the directive by using attribute search="search". = is used for two way binding to update the search result as user will change the input the info will get filtered automatically.
Markup
<input type="search" ng-model="search" class="form-control" placeholder="Search Manufacturers, Solutions, Equipment, Etc.">
<manufacturer info="manufacturer1" search="search"></manufacturer>
<manufacturer info="manufacturer2" search="search"></manufacturer>
Directive
app.directive('manufacturer', function() {
return {
restrict: 'E',
scope: {
info: '=',
search: '='
},
templateUrl: 'assets/js/directives/manufacturer.html'
};
});
Update
You have wrong html inside your manufacturer.html, specifically the content which is showing items using ng-repeat
<ul>
<li ng-repeat="item in info.items | filter:search">
{{ item }}
</li>
</ul>
Demo Plunkr
I'm trying to get to grips with AngularJS and had this working to echo individual things from a controller, but when I tried to incorporate a loop with ng-repeat all I get is {{tasks.title}} flashing onscreen for a second, then a blank empty div.
Any examples I've looked up seem a little different and I've tried a few ways, can anyone see where I'm going wrong?
Controller:
app.controller('MainController', ['$scope', function($scope) {
$scope.tasklist = {
tasks: [{
title: 'Wash Dog'
}, {
title: 'Email Joe'
}]};
}
]);
HTML:
<section class="panel">
<div ng-controller="MainController">
<div class="thumbnail" ng-repeat="tasks in tasklist">
<p>{{ tasks.title }}</p>
</div>
</div>
</section>
You are accessing the property tasklist not the actual tasks. It should be tasklist.tasks
<section class="panel">
<div ng-controller="MainController">
<div class="thumbnail" ng-repeat="tasks in tasklist.tasks">
<p>{{ tasks.title }}</p>
</div>
</div>
</section>
Another way would be to remove the tasks property:
app.controller('MainController', ['$scope', function($scope) {
$scope.tasklist = [
{
title: 'Wash Dog'
},
{
title: 'Email Joe'
}
];
}]);