Develop Reference

How to get a variable attribute of an HTML element?

I have a ng-repeat in which I have set an attribute like so:
<div ng-repeat="item in itemsList"
stepType="{{item.stepType}}">
{{item.itemValue}}
</div>
item.stepType can have values 'task' or 'action'
I'm trying to get the attribute 'stepType' like so:
let stepType = el.getAttributeNode("stepType");
console.log(stepType.value);
The result i'm getting is:
{{item.stepType}}
But the expected result is task or action
I also tried to get the attribute using the function getAttribute() but the result is the same.
I also noticed that in the above code if i log the value of stepType instead of stepType.value, i get the object which looks like this stepType: 'task'
How can i get the expected value?

If the attribute name is normalized:
<div ng-repeat="item in itemsList"
step-type="{{item.stepType}}">
{{item.itemValue}}
</div>
A custom AngularJS directive can $observe the attribute:
app.directive("stepType", function() {
return {
link: postLink
};
function postLink(scope, elem, attrs) {
attrs.$observe("stepType", function(value) {
console.log(value);
});
}
})
The console will log changes to the interpolated value of the attribute.

Try removing the double quotes. Replace this
<div ng-repeat="item in itemsList"
stepType="{{item.stepType}}">
{{item.itemValue}}
</div>
with
<div ng-repeat="item in itemsList"
stepType={{item.stepType}}>
{{item.itemValue}}
</div>

Angular: passing index of object array from ng-repeat to access object data

I have an array of objects displayed with ng-repeat:
<div class = "row" ng-repeat="article in academicArticles">
<div class = "col-md-9 academicArticle" ng-click = "index = $index">
<a ui-sref ="article">
<h2> {{article.title}} </h2>
<p> {{academicArticles.indexOf(article)}} </p>
<img src = "{{article.img}}" class = "img-responsive">
</a>
</div>
</div>
I want to display the selected "article" in another state. Right now I have:
<div class ="container">
<div class = "jumbotron">
<img src = "../../../photos/danielpark.jpg">
<h1>{{academicArticles[index].title}}</h1>
<p> Written By: {{academicArticles[index].author}} </p>
</div>
</div>
No errors but {{academicArticles[index].author}} and {{academicArticles[index].title} are blank. How can I access the data of the selected article in another sate?

you can do that by passing the index of the selected "article" as state parameter to the other state.
assume the other state called state2, you need to add the state parameter to the state in the router registration, for example, if you rigstered the new state like this, you can add the index as follow
$stateProvider.state("state2", {
url: '/state2/:index',
templateUrl:'state2.html',
controller: 'state2Controller'});
and then in state2Controller you can access the index parameter using stateParams service like this :
(function() {
angular
.module("app")
.controller("state2Controller", state2Controller);
state2Controller.$inject = ["$scope", "$stateParams"];
function state2Controller($scope, $stateParams){
$scope.index = $stateParams.index;
}
})()

I think you are trapped by ng-repeat scope issue, the trick is not bind primitive types to scope directly instead use some object like $scope.model and $scope.model.authorId

how to use variable in ng-click and ng-repeat?

I opened a ng-repeat block and I want to use "id" as counter for define toggle button counter in ng-click like this:
my code:
<div ng-repeat="line in linesList">
<a ng-click="'modal{{line.id}=!modal{{line.id}}'">{{line.id}}</>
</div>
my result is like this:
ng-click="'modal1=!modal1'"
but I need this:
ng-click="modal1=!modal1"

You can use an object 'modal', not multiple variables modal1, modal2, etc.
In your controller :
$scope.modal = {}
$scope.toggleModal = function(id) {
$scope.modal[id] = !$scope.modal[id]
}
And then:
<div ng-repeat="line in linesList">
<a ng-click="toggleModal(line.id)">{{line.id}}</>
</div>
See example here : http://codepen.io/thierry36t/pen/QGqPyj

Arrays concatenation in AngularJS and owl-carousel environment

I'm trying to load an carousel with angularjs using owl-carousel. I want my carousel to scroll endless, loading items every time the list is fully scrolled and adding queried elements to the actual list. My issue is:
When I get data from the controller of the next page, I want to merge and contact the received items to be merged the the current array and be rendered at the end of the carousel, here is what I've done:
<data-owl-carousel class="owl-carousel" data-options="{navigation: true, pagination: false, rewindNav : false}">
<div owl-carousel-item="" ng-repeat="item in hmc.ProductData.Products track by $index" class="item">
<a ng-href="/#!//{{Page.Culture+'/product/'+item.id}}">
<div class="telewebion-show-box one-row">
<div class="telewebion-show-box-cover">
<ul>
<li>{{::item.title}}</li>
<li>{{::item.price}}</li>
</ul>
</div>
<img ng-src="{{::item.picture_path}}" width="220" height="148" alt="" class="img-responsive"/>
</div>
</a>
</div>
</data-owl-carousel>
And here is my controller:
hmc.getProducts=function(){
ProductFactory.getProducts(hmc.ProductData.Offset,hmc.ProductData.Limit).then(function(Products){
if(hmc.ProductData.Page==0)
{
hmc.ProductData.Products[0]='';
}
hmc.ProductData.Page++;
var tempArray=[];
tempArray.push(Products);
console.log(tempArray);
hmc.ProductData.Products [0]=hmc.ProductData.Products [0].concat(tempArray[0]);
console.log(hmc.ProductData.Products );
hmc.ProductData.UpdateInProgress=false;
});
}
but it doesn't contact and merge the array and wouldn't work.

With tempArray.push(Products); you push a single array, considered as the whole variable, in a single cell of the array tempArray without obtaining the expected result. You should call:
tempArray = tempArray.concat(Products);
This way you push every element of Products in tempArray. Please note that concat does not modify the calling array directly, this behavior force you to reassign its return value to the original tempArray.

I Just did it like this:
hmc.ProductData.Page++;
var tempArray=[];
var tempArray2=[];
tempArray.push(AjaxProducts);
tempArray2.push(hmc.ProductData.Products);
hmc.ProductData.Products= tempArray2[0].concat(tempArray[0]);
tempArray.length = 0;
tempArray2.length = 0;
Now angular ng-repeat just repeat in a single array structure and ajax appends to the end of that array

binding to controller object in Angular

I'm new to angular, trying to bind an an element's content into the controller's Scope to be able to use it within another function:
here is the scenario am working around:
I want the content of the <span> element {{y.facetName}} in
<span ng-model="columnFacetname">{{y.facetName}}</span>
to be sent to the controller an be put in the object $scope.columnFacetname in the controller
Here is a snippet of what I'm working on:
<div ng-repeat="y in x.facetArr|limitTo: limit track by $index ">
<div class="list_items panel-body ">
<button class="ButtonforAccordion" ng-click="ListClicktnColumnFilterfunc(); onServerSideButtonItemsRequested(ListClicktnColumnFilter, myOrderBy)">
<span>{{$index+1}}</span>
<span ng-model="columnFacetname">{{y.facetName}}</span>
<span>{{y.facetValue}}</span>
</button>
</div>
</div>
angular.module('mainModule').controller('MainCtrl', function($scope, $http) {
$scope.columnFacetname = "";
$scope.ListClicktnColumnFilter = "";
$scope.ListClicktnColumnFilterfunc = function() {
$scope.ListClicktnColumnFilter = "\":\'" + $scope.columnFacetname + "\'";
};
}
the problem is that the $scope.ListClicktnColumnFilter doesn't show the $scope.columnFacetname within it, meaning that the $scope.columnFacetname is not well-binded.

In your ng-click instead of calling two different function
ng-click="ListClicktnColumnFilterfunc(); onServerSideButtonItemsRequested(ListClicktnColumnFilter, myOrderBy)"
you can declare like this
ng-click="columnFacetname = y.facetName; onServerSideButtonItemsRequested(columnFacetname , myOrderBy)"
You are trying to pass that model to another function by assigning it to ListClicktnColumnFilter in your controller
By doing in this way, you can achieve the same thing.
I have done one plunker with sample array,
http://embed.plnkr.co/YIwRLWXEOeK8NmYmT6VK/preview
Hope this helps!