Angular JS binding working only once in the page - javascript

I have a page where I do multiple binding to the same object (item, item2, message, messageType)
Though I placed the binding in several part of the page it works only the first time i placed. The objects are filled with ajax calls that return correctly the value (I logged them in the console)
What sounds even strange to me is that the <infomessage> directive has been used in several other places in the app (twice in the same page) and worked perfectly.
Do you have any idea on why these bindings don't work?
I even tried to $watch the objects and they are properly changes but seems that the view use the updated value only the first time
<div class="container" ng-app="MyApp" >
<div class="row" ng-controller="MyCtrl" >
<div class="col-lg-10">
<h3>...</h3>
</div>
<div class="col-lg-10">
<infomessage type="{{messageType}}" message="{{message}}"></infomessage>
</div>
<div class="col-lg-10">
Item: {{item.idbene_ext}} / {{item.id}} / {{item.img}}<br>
Ubicazione: {{item2.id}} {{item2.code}}
</div>
</div>
<div class="row" style="margin-top:20px">
<div class="col-xs-1"></div>
<div class="col-xs-4" ng-class="{'ubiBox':true,'ausilio-enabled':(item!=null),'ausilio-disabled':(item==null), 'boxfocus':(item==null)}">
<div ng-show="item==null">
<div class="number">1</div>
<img src="assets/images/disabled-128.png" width="100" class="img_none"/>
<h4> {{item.idbene_ext}} Select an item</h4>
</div>
<div ng-show="ausilio!=null">
<h4>Item:{{item.idbene_ext}}</h4>
</div>
</div>
<div class="col-xs-2"></div>
<div class="col-xs-4" ng-class="{'ubiBox':true,'ubi-enabled':(item!=null),'ubi-disabled':(item==null),'boxfocus':(item!=null) }">
<div ng-show="item==null">
<div class="number">2</div>
<img src="assets/images/Office-disabled-128.png" width="100" class="img_none"/>
<h4> Select the second item</h4>
</div>
<div ng-show="item!=null">
<h4>Item2 {{item2.code}}</h4>
</div>
</div>
<div class="col-xs-1"></div>
</div>
<div class="row">
<div class="col-lg-10">
<infomessage type="{{messageType}}" message="{{message}}"></infomessage>
</div>
<div class="col-lg-10">
Item: {{item.idbene_ext}} / {{item.id}} / {{item.img}}<br>
Ubicazione: {{item2.id}} {{item2.code}}
</div>
</div>
Here's the angularJS code
MyApp.controller("MyCtrl",function($scope,$http,Config,BarcodeService){
$scope.iditem2=-1
$scope.iditem=-1
$scope.item2=null
$scope.item=null
$scope.message=""
$scope.messageType=""
$scope.$on(BarcodeService.handleitem2,function(){
$scope.message=""
$scope.messageType=""
if($scope.item==null){
$scope.message="select an item before"
$scope.messageType="error"
}
$scope.iditem2=BarcodeService.id
$http
.post(Config.aj,{call:"item2.getitem2",id:$scope.iditem2})
.success(function(data){
$scope.item2=data.payload
})
})
$scope.$watch("item",function(){
console.log("---->",$scope.item)
},true)
$scope.$on(BarcodeService.handleitem,function(){
$scope.message="loading item"
$scope.messageType="info"
$scope.iditem=BarcodeService.id
$http
.post(Config.aj,{call:"item.getArticoloByIdMin",id:BarcodeService.id})
.success(function(data){
$scope.message="item loaded!!"
$scope.item=data.payload
})
})
})

Ok guys, got it!
The problem was lying in the fact that I have two in my application but i placed the ng-controller only on the first one.
This caused all the binding in the second div to fail because they were outside the controller.
I moved the ng-controller in the parent div that contains both and now everything works like a charm.
Thanks anyway to #wachme and #ivarni for taking care of my question.
Happy coding to *

Related

What is the proper way of using ng-repeat to set attributes on an element?

So I have the following div:
<div ng-repeat="player in playersScores" class="sb_lane">
<div class='sb_animation drop'></div>
<div lane="{{player.lane}}" class='dropbox' dropbucket>
<div class='sb_lHeader'>
<div class="drop">Lane {{player.lane}}</div>
<div class="drop">{{player.player}}</div>
</div>
<div class="sb_rScore drop">Run : {{cRun}} of {{tRun}}
<div>Run Score</div>
<div >{{player.rScore}}</div>
</div>
<div class="sb_tScore drop">Game Score
<div > {{player.gScore}}</div>
</div>
</div>
</div>
I am getting an error from using {{player.lane}} in the this line:
<div lane="{{player.lane}}" class='dropbox' dropbucket>
My question is this: What is the proper way of using ng-repeat to set attributes on an element?
Simply use
<div lane="player.lane" class='dropbox' dropbucket>
Turns out I had a two way binding in the drag and drop directive that was set to lane. Once I removed that binding, everything worked as expected.
Thanks for the insight everyone..
Z

$scope variable not updating in view

I have the following snippet of code,
<div ng-controller="GraphCtrl" ng-if="errorTracerouteResultsLength!=0">
<h5>Erroneous Traceroute Paths
<small>Sub-heading</small>
</h5>
<a href="#" ng-repeat="(key, val) in errorTracerouteResults" ng-click="loadTraceroutePath(val.metadata);">
S: {{val.source.ip}}
D: {{val.destination.ip}}
</a>
</div>
It works fine, loadTraceroutePath belongs to another controller,(lets call it X) but somehow ng-click works and console.log gets printed out with the correct metadata value.
However, in controller X, I have,
$scope.loadIndividualTraceroutePath = function (metadataKey) {
$scope.noOfResults = 1;
}
In the html, I have {{noOfResults}} all over the place. Some of it are able to display 1 while some can't. I have already attached the ng-controller directives and point to controller X, but {{noOfResults}} does not display.
How can I make {{noOfResults}} display in any section of the HTML?
Edit: I have added the HTML.
<div class="row">
<div class="col-lg-9">
<div class="panel panel-default">
<div class="panel-heading">
<i class="fa fa-bar-chart-o fa-fw"></i> Visualisation
<div class="pull-right">
Layout
</div>
</div>
<!-- /.panel-heading -->
<div class="panel-body">
<div class="container" ng-controller="X">
<!--This does not work-->
{{noOfResults}}
</div>
<div>
<div ng-controller="IndividualTraceroutePathGraphCtrl" id="individual_traceroute_path_graph"></div>
</div>
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
The ng click in the first part of this question is way below.
You have a extra ; at the end, also you are not using the object what you are passing as a parameter to the function, hence Change
From:
<a href="#" ng-repeat="(key, val) in errorTracerouteResults" ng-click="loadTraceroutePath(val.metadata);">
To:
<a href="#" ng-repeat="(key, val) in errorTracerouteResults" ng-click="loadTraceroutePath(val)">
Then,
$scope.loadIndividualTraceroutePath = function (metadataKey) {
$scope.noOfResults = 1;
}
EDIT
You don't need to mention so many controllers in the view, have one controller where the function is defined and remove the rest, here, Update like this,
<div class="container" >
<!--This does not work-->
{{noOfResults}}
</div>
<div>
<div id="individual_traceroute_path_graph"></div>
</div>
</div>

AngularJS - JQuery News Ticker - After moving news the javascript function doesn't get called

This is an awkward problem, which will be better explained by looking at the live demo. Basically I have a news box populated with ng-repeat using Angular. Then I am using a jquery plugin called news ticker which allows the news headlines to move around. The first time you land on the page the news items are in their proper spots and they call the function accordingly. After moving them up or down, they stop calling the function, set a breakpoint in the code and after moving the breakpoint is never hit.
Edit - After researching this further I have found that it is because the elements need to be compiled using $compile after they're re added. However following some examples I have not gotten this to work. I need a way of compiling after a move event with this plugin.
Live demo
Angular Script for with function that should be called.
$scope.UpdateNews = function (item,number) {
console.log(item + ' ' + number);
switch (item)
{
case 'General':
$scope.NewsCast.General.Body = $scope.News.GeneralNews[number].Text;
break;
}
};
What the HTML looks like with the news boxes
<script src="http://www.jqueryscript.net/demo/Responsive-jQuery-News-Ticker-Plugin-with-Bootstrap-3-Bootstrap-News-Box/scripts/jquery.bootstrap.newsbox.min.js" type="text/javascript"></script>
<div class="row">
<div class="col-md-6 col-lg-3">
<div class="panel panel-default">
<div class="panel-heading"> <span class="glyphicon glyphicon-list-alt logo-inverse pull-left"></span><b> General News</b></div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12">
<ul class="demo1" style="overflow-y: hidden; height: 280px;" ng-model="Idk">
<li style="" class="news-item text-left" ng-repeat="item in News.GeneralNews"><strong>{{item.DateValue | date: "MMM dd yyyy"}}</strong> {{item.Preview}}<a class="FakeClickable" ng-click="UpdateNews('General',item.index)" data-target="#GeneralModal" data-toggle="modal">Read more...</a></li>
</ul>
<div ng-if="Width>768">
<div ng-include="'../pages/Modals/General/GENERAL_INLINE.html'"></div>
</div>
</div>
</div>
</div>
<div class="panel-footer"> </div>
</div>
</div>

How to calculate a transaction in ng-if and put a `<div>` only if the condition is true?

i want to add a row only if the x in $scope.grp leaves no remainder when divided by 3. I was trying the following code.
<div class="card">
<div ng-repeat="x in grp">
<div class="row">
<div ng-if="x%3==0">
<div class="row">
</div>
<div class="col col-33">
/my rest of code here/
</div>
</div>
</div>
<div>
any suggestions how to do it?
Not sure whether the following is correct or not. But a way to achieve it is as following.
<div data-ng-app="" data-ng-init="grp=['one','two','three','four','five','six','seven']" class="container">
<div ng-repeat="x in grp" ng-if="$index % 3 == 0" class="row">
<div class="col-xs-3">{{grp[$index]}}</div>
<div class="col-xs-3" ng-if="$index + 1 < grp.length">{{grp[$index+1]}}</div>
<div class="col-xs-3" ng-if="$index + 2 < grp.length">{{grp[$index+2]}}</div>
</div>
<div>
I am assuming grp is a string array and used $index to group.
Jsfiddle
Check this:
if reminder is 0, row will be added
<div class="card">
<div ng-repeat="x in grp">
<div class="row">
<div ng-if="x%3==0">
<div class="row">
reminder 0
</div>
</div>
<div class="col col-33">
my rest of code here
</div>
</div>
</div>
Here is the code for controller
function ctrl($scope){
$scope.grp=[1,2,3];
}
Codepen : http://codepen.io/anon/pen/eJJKwr
I'm not very familiar with angularjs - however your html struct is wrong in this case. Your struct will create an empty "row" column before every third div. I don't know if there is a way to just open a "div" tag in an ng-if and close it at a later point.
You should consider just creating array chunks for your cards. So each chunk will hold 3 cards and then you can loop over the first level of chunks, and then over the second level of your array. It will look something like that:
<div class="card">
<div ng-repeat="grp in chunks">
<div class="row">
<div ng-repeat"x in grp"> // as mentioned, I got no clue about angularjs, so I don't know how to correctly address the values within the groups
<div class="col col-33">
my rest of code here
</div>
</div>
</div>
</div>
</div>
As mentioned before I have no clue about angularjs itself, however you should be able to create chunks (split your array into smaller arrays) like:
var chunks=[[1,2,3],[4,5,6],[7,8,9]];

Rearranging the order of divs in an RSS using jQuery

I need to rearrange the div order of an RSS. Each item has 3 divs. I will need to move the div with the class "itemDate" before the div with the class "itemTitle" (see markup below). Should I use the function .each(); is there a jQuery out of the box solution for this or do I need to write my own function?
<div id="RSS">
<div class="col-md-3 item">
<div class="itemTitle"></div>
<div class="itemDate"></div>
<div class="itemContent"></div>
</div>
<div class="col-md-3 item">
<div class="itemTitle"></div>
<div class="itemDate"></div>
<div class="itemContent"></div>
</div>
<div class="col-md-3 item">
<div class="itemTitle"></div>
<div class="itemDate"></div>
<div class="itemContent"></div>
</div>
</div>
There is a function in jQuery called prependTo, which moves a element to the beginning of a given target. Check it out the example below.
$('.itemDate').each(function(){
$(this).prependTo($(this).parent());
});
This code just move every itemDate into the beginning of every respective parent.

Categories