Incrementing in angular - angularjs

I have json in my controller (will be moved) that is basically: id, questionName, answer.
I want to show each question in the code below. One question at a time. Upon clicking on the A links for yes/no I want the question to move on to the next.
I was hoping I could increment using "count" with an initial 0 which is the id relating to the json, and it would subsequently increase till the last question. This however doesn't seem to work; or at least my implementation doesn't.
I hope that's clear enough. It's hard to explain.
<div class="row" id="dropdown" ng-controller="testYourself">
<div id="q" class="cta1_content ugh" style="display:none;">
<div ng-repeat="data in quiz" ng-show="count==0" data-ng-init="count=0">
<h2 class="text-center">{{data.name}}</h2>
<div class="col-xs-6 col-md-3 col-md-offset-3 text-center yesno">
<a href="#" class="q" data-question="{{count}}" data-answer="1" ng-click="count=count+1">
<span class="cta_next"><i class="icon ion-checkmark-round"></i></span>
</a>
</div>
<div class="col-xs-6 col-md-3 text-center yesno">
<a href="#" class="q" data-question="{{count}}" data-answer="0" ng-click="count=count+1">
<span class="cta_next"><i class="icon ion-close-round"></i></span>
</a>
</div>
</div>
</div>
</div>
My controller looks like this:
app.controller('testYourself', ['$scope', function($scope) {
$scope.quiz = [
{id:0, name:"q1", answer: [{0: 'a', 1: 'b}], weight:25}
];
The id's are unnecessary to me, but added to try and do what I was trying. (I am 2 days new to Angular).
Thank you
UPDATE
------
<div id="q" class="cta1_content ugh" ng-controller="testYourself" data-ng-init="count=0">
<div ng-repeat="data in quiz" ng-show="data.id==count">
<h2 class="text-center">{{ data.name }} {{count}}</h2>
<div class="col-xs-6 col-md-3 col-md-offset-3 text-center yesno">
<a href="#" class="q" data-question="{{data.id}}" data-answer="1" ng-click="count=count+1">
<span class="cta_next"><i class="icon ion-checkmark-round"></i></span>
</a>
</div>
<div class="col-xs-6 col-md-3 text-center yesno">
<a href="#" class="q" data-question="{{data.id}}" data-answer="0" ng-click="count=count+1">
<span class="cta_next"><i class="icon ion-close-round"></i></span>
</a>
</div>
</div>
</div>

Well there are quit a number of things going on here.
Many syntax errors in your posted js code. So if that is pasted from your actual code, consider adding necessary braces, brackets, and quotes.
There is an inline style on #q. This means that none of the contents are visible. With angular, all you need is ng-show, and the library will take care of the rest. So get rid of that, and you should see question 1.
You probably want to put the ng-init on an element like #q. ng-repeat creates a new scope, so your count here is in the scope of the repeat rather than the scope of the controller (which is probably what you want).
Hope that helps.

Related

I have two table that link with each other in SQL. But i can't figure out how to print one of table's data

Two table are Product and Category. I create a menu in the right allowing client to choose their wanted category by chosing list of CategoryName.But the menu show up many lines of recursive CategoryName, in fact, just two CategoryName are neccessary.
This is my main view
#model PagedList.IPagedList<SportsStore.Domain.Concrete.Product>
#using PagedList.Mvc;
<div class="page-header">
<h3>Danh sách sản phẩm</h3>
</div>
<div class="col-xs-12 col-md-3 category">
#foreach (var item in Model)
{
Html.RenderPartial("~/Views/Home/_Category.cshtml", item.Category);
}
</div> // this is my menu
<div class="col-xs-12 col-md-9">
#foreach (var product in Model)
{
<div class="col-xs-12 col-md-4 product">
<a href="#" title="#product.ProductName">
<div class="frame">
<img src="#product.ProductImage" class="img-responsive adaptor" />
</div>
<div class="title">
<h3>#product.ProductName</h3>
</div>
<strong>#product.Price $</strong>
<div class="rate">
<div>
<p>
<i class="glyphicon glyphicon-star star1"></i>
<i class="glyphicon glyphicon-star star2"></i>
<i class="glyphicon glyphicon-star star3"></i>
<i class="glyphicon glyphicon-star star4"></i>
<i class="glyphicon glyphicon-star star5"></i>
<span>(15 nhận xét)</span>
</p>
</div>
</div>
</a>
</div>
}
#Html.PagedListPager(Model, page => Url.Action("Index",
new { page }))
</div>
<script src="~/Scripts/Rating.js" type="text/javascript"></script>
//This is my _Category, which i want to to print out only two of CategoryName //instead of lines of recursive CategoryName:
#model SportsStore.Domain.Concrete.Category
<p>
#Model.CategoryName
</p>
I don't know how to do this ideally. I was tempted to add If clause in _Category to sort CategoryName. But i know i should not do the bussiness logic in View. If i choose #model PagedList.IPagedList instead of #model PagedList.IPagedList, it's rather wasted because i have to change my code every time i bring some new data to this view. Please help me

Fixing Ionic Grid Layout

I am using ionic -v1 for my app. This is my code for showing data in two side by side columns.
<div class="row">
<div class="col col-50" ng-repeat="news in mainCtrl.content.sources">
<article class="item">
<a class="item item-thumbnail-left" href="{{news.url}}">
<img ng-src="{{news.urlsToLogos.medium}}">
<h2>{{news.name}}</h2>
<p>{{news.description}}</p>
</a>
</article>
</div>
The problem is it is showing only two results.
Can u please tell me y is that and how to fix this.?
And how can i use image-cards instead of article.?
i have use when two column display
angular-masonry
the demo follow this Link
if you implement then you can use image-cards instead of article
Your code something like that after implement the angular-masonry
<div masonry class="row">
<div class="col col-50" ng-repeat="news in mainCtrl.content.sources">
<article class="item">
<a class="item item-thumbnail-left" href="{{news.url}}">
<img ng-src="{{news.urlsToLogos.medium}}">
<h2>{{news.name}}</h2>
<p>{{news.description}}</p>
</a>
</article>
</div>

Angular ng-click suddenly not working

I have this view, its loaded with ng-view in my index.html.
This is a snippet of the view:
<div class="window">
<div class="top">
<div class="windowTitle">
<i class="fa fa-list"></i>{{vm.workout.Name}}
//STACKOVERFLOW LOOK HERE
<div ng-click="vm.save()" id="btnSave" class="fa fa-floppy-o">123</div>
</div>
</div>
<div class="windowContent">
//STACKOVERFLOW LOOK HERE
<div ng-click="vm.save()" id="btnSave" class="fa fa-floppy-o"></div>
<div class="windowRow setList animatedList" ng-repeat="(index, set)
As you see, i have 2 buttons with ng-click="vm.save()"
The first one does not work, but it has been working for days.
Then i added the second one for testing, and it works, very wierd.
They both reside inside the same ng-view, which has the same controller assignted to them by the ng routing.
So im in the view, the right controller is active, but only one button is working, clues?
It was because i had an open angular expression in the same div.
<div class="window">
<div class="top">
<div class="windowTitle">
<i class="fa fa-list"></i> <span>{{vm.workout.Name}}</span>
//STACKOVERFLOW LOOK HERE
<div ng-click="vm.save()" id="btnSave" class="fa fa-floppy-o">123</div>
</div>
Works like a charm :)

Restricting no. of columns in a row ng-repeat : angular

I have a page to display my friends list for our web application. My problem is that I cant restrict the number of friends shown in one row. I have to display 3 friends in each row:
<div class="row" style="padding-left:200px;">
<div ng-repeat="favourite in favouriteData.data.result">
<div class="col-sm-4 col-md-3 col-lg-2">
<div class="fav_image" >
<img ng-src='/assets/images/profilePics/{{favourite.username +"/"+favourite.profilePic}}' style="height:100px;width:100px;"/>
<h4 class="aju_fav">{{favourite.username}}</h4>
<h4 class="aju_fav">{{favourite.city}}</h4>
<h4 class="aju_fav">Un-Favourite</h4>
<div class=" pull-left user_btm_right"> <i class="fa fa-comments"></i> </div>
</div>
</div>
</div>
plz help to resolve the issue
If you want to always display 3 columns per row (independently from the screen width) you can simply use col-xs-4 (enclosing in a <div class="row"> containing ng-repeat):
<div class="row" ng-repeat="favourite in favouriteData.data.result" class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
<div class="fav_image">
<img ng-src='http://192.168.1.75/zentiera/assets/images/profilePics/{{favourite.username +"/"+favourite.profilePic}}' style="height:100px;width:100px;"/>
<h4 class="aju_fav">{{favourite.username}}</h4>
<h4 class="aju_fav">{{favourite.city}}</h4>
<h4 class="aju_fav">Un-Favourite</h4>
<div class=" pull-left user_btm_right"> <i class="fa fa-comments"></i> </div>
</div>
</div>
The best way is to use 'limitTo' filter component in ng. Here is documentation
<div ng-repeat="favourite in favouriteData.data.result | limitTo:3">

AngularJs and Bootstrab tiles

I am trying to display equal containers with image (that can be submitted with a different size, but resized to a fix size when displayed), and some content (title description, etc) -- similar to the Kickstarter's tiles of projects (https://www.kickstarter.com/discover/categories/technology?ref=discover_index). I tried columns, tables, container, but looks like I am missing something, because it doesn't want to display equal tiles :(((( HELP!
Here is my last "try"
<ul ng-repeat="project in projects" class="col-md-4 col-l-3 col-xl-2" id="wrap">
<a href="project.html?={{project.objectId}}" id="projectText">
<li><img class="img-responsive" src="{{project.image.url}}"></li>
<li>{{project.title}}</li>
<li>{{project.blurb}}</li>
<li>{{project.likes || 0}}</li>
<li><span id="hover" class="glyphicon glyphicon-thumbs-up" ng-click="incrementLikes(project, 1)"></span></li>
</a>
</ul>
I did a quick test and it looks as though you can have col-*-x tags that add up to more than 12, in which case this will work
<div class="row">
<div ng-repeat="project in projects">
<div class="col-md-4 col-l-3 col-xl-2">
<ul>
<a href="project.html?={{project.objectId}}" id="projectText">
<li><img class="img-responsive" src="{{project.image.url}}"></li>
<li>{{project.title}}</li>
<li>{{project.blurb}}</li>
<li>{{project.likes || 0}}</li>
<li><span id="hover" class="glyphicon glyphicon-thumbs-up" ng-click="incrementLikes(project, 1)"></span></li>
</a>
</ul>
</div>
</div>
</div>

Categories

Resources