We Keep Coding

How to stop AngularJS from Binding in Rows

I am using Angularjs 1.5.3 I have 2 services one service calls Area names, the other calls the details for the Area.
So in my code, I call the first service to get the Area, then I set the ng-init to call the details. This works fine, however angular keeps only the first value for all the rows.
Here is the code;
<tbody data-ng-repeat="area in vm.Areas" ng-init='vm.getDetails(area)'>
<tr>
<td class="text-bold">{{area}}</td>
<td>{{vm.AreaDetails.Employees}}</td>
<td>{{vm.AreaDetails.Hours}}</td>
<td>{{vm.AreaDetails.Sales}}</td>
</tr>
</tbody>
Any ideas on fixing this?
Thanks

You should avoid using ng-init for this. It's an abuse of ng-init and decrease your performance drastically. See: ngInit. Try to get your details before you start rendering eg (pseydo):
vm.areas = vm.areas.map(function(area) {
return area.details = service.getDetails(area);
}

#TJ answer is right on the technical part however i think you have a design problem in your code.
If you want to load area and their details you should load all of them in one go.
Instead you'll load them one by one there.
So let's say you have 10 Area and you're Detail service load data from (i suppose) the server : that makes 11 requests : 1 for all area, 10 for details of each area.
So just load all the whole thing in one call to your service (and presumably the server) and perform a simple ng-repeat.

You can simply have the controller iterate over the areas and call getDetails for each of them and append the detail to the respective area when they arrive.
The bindings will be along:
<tbody data-ng-repeat="area in vm.Areas">
<tr>
<td class="text-bold">{{area}}</td>
<td>{{area.details.Employees}}</td>
<td>{{area.details.Hours}}</td>
<td>{{area.details.Sales}}</td>
</tr>
</tbody>
The bindings will be updated when the data arrive.
Or you can use a directive with isolated scope, something like the following:
angular.module('yourModule').directive('areaInfo', function() {
return {
scope: {
area: '=areaInfo'
},
require: "yourController", // conroller where getDetails is defined
templateUrl: "area-info.html",
link: function(scope, element, attrs, ctrl) {
scope.areaDetails = ctrl.getDetails(scope.area);
}
}
});
<script type="text/ng-template" id="area-info.html">
<tr>
<td class="text-bold">{{area}}</td>
<td>{{areaDetails.Employees}}</td>
<td>{{areaDetails.Hours}}</td>
<td>{{areaDetails.Sales}}</td>
</tr>
</script>
<tbody data-ng-repeat="area in vm.Areas" area-info="area"></tbody>
You can even move the getDetails method to the directive itself.

Conditionally Alter link in button in Angular

I am trying to figure out a simple way to swap a link in a button in angular js, I have properties available in the scope that I can use, but I am not sure how to implement. The link I am trying to alter is in the 'onClick' attribute in the button. Thanks again in advance, here is my code:
<div class="instructions-button">
<button
type="button"
class="halo-modal-action-button external-instructions"
onClick="window.open('https://mysite/foo');"
window="new"
ng-disabled=""
ng-click=""
data-bs-enabled=""
>Instructions</button>
</div>
I am trying to make a simple conditional to show either:
'mysite/foo || mysite/bar'
but am not sure how to make it work.

Don't use onClick event on the button, although it might feel weird to you, since you are coming from vanilla JS, you should use ng-click.
<button
class="halo-modal-action-button external-instructions"
ng-disabled=""
ng-click="openWindow()"
data-bs-enabled=""
>Instructions</button>
and inside controller
$scope.openWindow = function(){
if ( condition ) {
open('http:foo.bar')
} else {
open('http:bar.foo')
}
}

Two simple ways to do this.
1) Two buttons and show one conditionally with ng-show.
<button ... ng-show="conditionShowFooTrue" >
<button ... ng-show="conditionShowBarTrue" >
2) Use ng-click to call a scope function to conditionally sets the url as the other answers have suggested.

If you're using routes, you can just use ng-click like #Akxe said, and with the $location service in your controller, do:
$scope.changeLocation = function(){
if(condition)
{
$location.path('/foo');
} else
{
$location.path('/bar');
}
};
I think that would be the Angular way to do this.

AngularJS $scope variable does not go into view

I have a simple boolean variable that switches a DIV to be hidden at startup and then shown after an action until the end of the application. But it does not switch - the DIV is always hidden. Please help, what is wrong in the code below:
<div class="right" ng-controller="EmployeeDetailsCtrl" ng-show={{showEmployeeDetails}}>
<p>{{employee.name}} {{employee.surname}}</p>
</div>
inside EmployeeDetailsCtrl controller:
$scope.$on('showEmployee', function (event, data) {
$scope.showEmployeeDetails = true;
$scope.employee = data;
});
$scope.showEmployeeDetails = false;
BTW, the $scope.employee variable updates correctly after the event is triggered, so I'm really stuck what's going on here.

Remove the {{}} from your ng-show, like so:
<div class="right" ng-controller="EmployeeDetailsCtrl" ng-show="showEmployeeDetails">
<p>{{employee.name}} {{employee.surname}}</p>
</div>

When you're using ng-show you're binding to an expression, not a string, so just use:
ng-show="showEmployeeDetails". That's why you can do more complex stuff like ng-show="1 + 1 === 2".
If that still doesn't cut it, it could be a scoping issue with primitives being assigned to a child scope and not seen up the parent scope. It doesn't look like it from the code you showed but perhaps it's simplified for this question, you never know.

get the text of div using angularjs

i want to get the text of div using angularjs . I have this code
<div ng-click="update()" id="myform.value">Here </div>
where as my controller is something like this
var myapp= angular.module("myapp",[]);
myapp.controller("HelloController",function($scope,$http){
$scope.myform ={};
function update()
{
// If i have a textbox i can get its value from below alert
alert($scope.myform.value);
}
});
Can anyone also recommand me any good link for angularjs . I dont find angularjs reference as a learning source .

You should send the click event in the function, your html code should be :
<div ng-click="update($event)" id="myform.value">Here </div>
And your update function should have the event parameter which you'll get the div element from and then get the text from the element like this :
function update(event)
{
alert(event.target.innerHTML);
}

i just thought i put together a proper answer for everybody looking into this question later.
Whenever you do have the desire to change dom elements in angular you need to make a step back and think once more what exactly you want to achieve. Chances are you are doing something wring (unless you are in a link function there you should handle exactly that).
So where is the value comming, it should not come from the dom itself, it should be within your controller and brought into the dom with a ng-bind or {{ }} expression like:
<div>{{ likeText }}</div>
In the controller now you can change the text as needed by doing:
$scope.likeText = 'Like';
$scope.update = function() {
$scope.likeText = 'dislike';
}
For angular tutorials there is a good resource here -> http://angular.codeschool.com/

Redefine your function as
$scope.update = function() {
alert($scope.myform.value);
}
A better way to do it would be to use ng-model
https://docs.angularjs.org/api/ng/directive/ngModel
Check the example, these docs can be a bit wordy

Angularjs binding not working on array of complex object

Given this controller:
angular.module("upload.app").controller("upload",[upload]);
function upload(){
var me = this;
me.uploadList = [{Name: "Test Upload",
Id: 1,
NewFiles: []
}];
me.selectedUpload = me.uploadList[0];
me.setSelected = function(upload) {
me.selectedUpload = upload;
}
...
me.addFilesToUpload = function(element){
me.selectedUpload.NewFiles = element.files;
}
and this html:
<div ng-controller="upload as vm">
<input id="filechooser" type="file" multiple onchange="angular.element(this).scope().vm.addFilesToUpload(this)" />
<table>
<tbody>
<tr ng-repeat="up in vm.uploadList" ng-click="vm.setSelected(up)">
<td>{{up.Name}}<br />{{up.NewFiles.length}}</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr ng-repeat="file in vm.selectedUpload.NewFiles">
<td>{{file.name}}</td>
</tr>
</tbody>
</table>
</div>
I would expect that when the input onchange event calls addFilesToUpload() and the files are then added to the NewFiles property, that Angularjs would automatically update the view ... in this case, {{up.NewFiles.length}} value in the first table and the second table that lists the files.
However, nothing is being updated until I click on my row in the first table which, as you can see, fires the setSelected function on my controller.
How can I get Angular to refresh when the NewFiles property is changed as well?
Sorry, just fixed the fiddle -- forgot to save it originally
See this jsfiddle. Begin by clicking on the Test Upload. Now select files. Nothing happens. Click again on Test Upload and you'll see all the bindings refreshed.

Use $apply (DEMO):
$scope.$apply(function() {
$scope.selectedUpload.NewFiles = element.files;
});
This is usually done by angular but because you are using the native js event onchange you have to wrap it in an $apply callback yourself.

There is no default binding provided by angular to input type=file https://github.com/angular/angular.js/issues/1375, so you'll probably need to create your own directive or you can use angular-file-upload library.
Check out this answer from stackoverflow.

The problem with your updated fiddle is mainly this line
$scope.selectedUpload = null;
The moment you have selected the files and invoke the callback addFilesToUpload(), and assign the selected files to $scope.selectedUpload.NewFiles = element.files; then you'll definitely get an error:
Uncaught TypeError: Cannot set property 'NewFiles' of null
Simply change it back to your original code: $scope.selectedUpload = $scope.uploadList[0];
The next problem would be to update the current selected upload list, simply use $scope.$apply(), because you are using a native event onchange to update the $scope. Your callback should look this:
$scope.addFilesToUpload = function(element){
$scope.$apply(function() {
$scope.selectedUpload.NewFiles = element.files;
});
}
Check this updated fiddle.