I'm using one controller for a view that looks like this
<div>
<div ng-repeat="blah in blah1">
</div>
<div ng-repeat="blah in blah2">
</div>
</div>
The issue is that the second time ng-repeat is used, it seems to duplicate what was seen in the first repeat. I have confirmed that blah1 is in fact different from blah2. I'm not sure as to why the second ng-repeat goes through items in blah1.
Any clues?
Thanks!
maybe the ng-repeat for blah2 is included inside the ng-repeat of blah1, so it repeats blah1 content everytime blah2 is iterated.
otherwise should work fine
<div ng-app='bla'>
<div ng-controller='ctrl'>
<div ng-repeat="blah in blah1">
<span>{{blah}}</span>
</div>
<hr/>
<div ng-repeat="blah in blah2">
<span>{{blah}}</span>
</div>
</div>
</div>
<script>
angular.module('bla', [])
.controller('ctrl', ctrl);
function ctrl($scope){
$scope.blah1 = [1,2,3,4,5,6,7,8,9];
$scope.blah2 = [21,22,23,24,25,26,27,28,29]
}
</script>
https://jsfiddle.net/hsdcpk2x/1/
ng-repeat goes just over all the items in blah1 and blah2. If the second ng-repeat duplicates blah1 then they are in fact the same. You should post more code so we can get to the actual issue.
use ng-repeat-start and ng-repeat-end
hope it would solve your issue
Related
How can I make bootstrap "jump" to the next row inside ng-repeat.
To clarify, I have something like this:
<div class=row>
<div class="col-sm-3" ng-repeat="field in fields">
</div>
</div>
What I want is to jump to the next row based on a condition inside ng-repeat. Like this:
[1][2][3]
[4][5]
[6][7][8]
The catch here is that I have to jump columns inside the column div.
Does anyone know the best way to solve this? Please tell me if my question isn't clear.
played a bit with ng-class hope that helps
its a bit confusing how bootstrap class works with angular
http://jsfiddle.net/8n9u54ud/
js:
angular.module('app',['QuickList']).controller('mainCtrl', function($scope){
$scope.myJson = [1,2,3,4,5,6,7,8,9]
})
html:
<div ng-app='app' ng-controller='mainCtrl'>
<div class="row">
<div ng-repeat="i in myJson" ng-class="{'col-sm-4':i!=5, 'col-sm-5':i==5}">
{{i}}
</div>
</div>
</div>
UPDATED
<tr ng-repeat="baseline in tower.baselines"></tr>
I have above HTML code where i have been using the ng-repeat to get to store the distorted array into an variable baseline....how can i access the same variable into controller?
<div ng-controller="SomeCtrl">
<p>{{baseline.doSomething($index)}}</p>
</div>
Use the ng-repeat variable ($index) in the html and call a function on the controller
<div ng-repeat="baseline in tower.baselines">
<div ng-controller="SomeCtrl">
<p>{{baseline.doSomething($index)}}</p>
</div>
</div>
I am trying to show the value from my json files using ng-repeat in angular js but I am unable to do that.
This is my code which I am trying:
<div ng-repeat = "x in myWelcome.definition">
{{x.attributes[0].children[0].node_id}}
<hr>
</div>
I have tried this and it is working:
<!-- first attributes start -->
<div ng-repeat = "x in myWelcome.definition.attributes">
{{x.rm_attribute_name}}<hr>
<div ng-repeat="a in x.children">
<div ng-if ="a.attributes">
a: {{a.attributes[0].rm_attribute_name}}
<div ng-if= "a.attributes[0].children">
chld
</div>
</div>
</div>
</div>
<!-- second attributes end -->
I am trying to understand how this line is working {{a.attributes[0].rm_attribute_name}} why it is not working like this {{a.attributes1.rm_attribute_name}} this is confusing. How it is shwoing all the results when I am using 0 and index.
And my json file is here in the plunker:
Plunker link of json and code
So how can I iterate here using ng-repeat here this code:
{{myWelcome.definition.attributes[0]}}
is working how can I show this in my view using ng-repeat I need to show all the attributes and child using ng-repeat.
ng-repeat can be used in the following way:
<div ng-repeat = "(key,value) in myWelcome.definition.attributes">
Key:{{key}} and value :{{value}}
<hr>
</div>
OR you can Try this:
<div ng-repeat = "x in myWelcome.definition.attributes">
<div ng-repeat="a in x.children">
a:{{a.node_id}}
</div>
</div>
Edited Plunker
I can see you are trying to implement ng-if and ng-repeat for your json file. You need to understand how ng-repeat works you can always check the index of you array using {{$index}}. So for your kind of problem I think this is the solution you should try.
<!-- first attributes start -->
<div ng-repeat = "x in myWelcome.definition.attributes">
{{x.rm_attribute_name}}<hr>
<div ng-repeat="a in x.children">
{{$index}}
<div ng-if ="a.attributes">
<div ng-repeat="b in a.attributes">
<hr>
{{b.children.length}}
<div ng-if="b.children.length > 1">
If the array is more than 1 please do the magic here
</div>
</div>
<div ng-if= "a.attributes[0].children">
chld
</div>
</div>
</div>
</div>
<!-- second attributes end -->
You can always see the indexes using {{$index}} and you should always use .length to check if it has more than 1 value. This way you can achieve what you want and you should also learn something about arrays in javascript and what is the differnece between dot and bracket. Please read this http://www.dev-archive.net/articles/js-dot-notation/. I think you should learn the basics of javascript.
I am using nodejs + Angular and html as a froentend
Here is my HTML Code
<div id="container" ng-app='two_way' ng-controller='two_way_control'>
<div class="row" ng-repeat="data in profile_pictures">
<div class=".col-sm-6 .col-md-5 .col-lg-6" style="background-color:#eee;height:150px;width:500px;margin-left:240px;margin-top:20px;">
<h4 style="padding:10px;">User Say's</h4><hr>
<img src="{{data.profile_picture}}" class="img-circle" style="width:100px;height:100px;margin-left:-140px;margin-top:-130px;">
</div>
</div>
</div>
and my angular code is here
app.controller('two_way_control',function($scope,$http,$interval){
load_pictures();
$interval(function(){
load_pictures();
},300);
function load_pictures(){
$http.get('http://localhost:3000/load').success(function(data){
$scope.profile_pictures=data;
});
};
});
and my server code is
app.get('/load',function(req,res){
connection.query("SELECT * from user_info",function(err,rows){
if(err)
{
console.log("Problem with MySQL"+err);
}
else
{
res.end(JSON.stringify(rows));
}
});
});
Which is working fine..
When i entered a new record in **user_info*. it will display new record to me.
Is this right way to do two way data binding or i am missing something
Please help.
Thanks
It looks as if you're doing one way binding because your angular code is never modifying the profiles pictures in the table (meaning you ain't got no form fields, your page is read only). But AFAIK you're doing everything right, as soon as you add editing capabilities to your angular page you would be doing two way binding all the way
YES! Angular '2-way bind' is between scope.variable and VIEW (ng-model in input elements).
In this case, the SRC property of IMG element need to be setd with ng-src!
Because IMG is a html element that load before angular principal scripts.
<div id="container" ng-app='two_way' ng-controller='two_way_control'>
<div class="row" ng-repeat="data in profile_pictures">
<div class=".col-sm-6 .col-md-5 .col-lg-6" style="background-color:#eee;height:150px;width:500px;margin-left:240px;margin-top:20px;">
<h4 style="padding:10px;">User Say's</h4><hr>
<img ng-src="{{data.profile_picture}}" class="img-circle" style="width:100px;height:100px;margin-left:-140px;margin-top:-130px;">
</div>
</div>
</div>
I am using multiple named ui-views in a single controller. Everything is working as spected when name the ui-view in the html file with this code:
<div class="box">
<div ui-view="selector"></div>
<div ui-view="widget1"></div>
<div ui-view="widget2"></div>
<div ui-view="widget3"></div>
<div ui-view="widget4"></div>
</div>
But when I want to load dynamically some of those views with a ng-repeat it does not update the information.
<div class="widgets">
<div class="widget-container" ng-repeat="widget in widgets">
<div ui-view="{{widget}}"></div>
</div>
</div>
How could I load ui-views from my ng-repeat?
This hadn't been answered so i decided to go ahead and show how to do it. Unfortunately for some reason the attempt in the question didn't work but what you can do is link to a function between curly brackets and return the string of the view you want. For instance the controller would look like this:
$scope.groups = ['main','cases', 'models'];
$scope.pickView = function(index){
return $scope.groups[index];
};