Change Behavior of controller based on calling element - angularjs

I have one controller used by two different views:
<div ng-controller="MyCtrl" ng-include="slice = false">
<span ng-repeat="value in values">{{ value }}</span>
</div>
...
<span ng-controller="MyCtrl">
<div ng-repeat="value in values">{{ value }}</div>
</span>
The controller:
var MyCtrl = function($scope){
$scope.values = ['a','fancy','array'];
// if called from span
//$scope.values = ['a','fancy','array'].slice(2);
}
I'd like to know if it is possible to detect from what element the controller is being called to change the behavior of the controller.
Update: Based on #matys84pl's answer, here is my new controller
MenuCtrl = function($scope) {
$scope.slice = true;
if($scope.slice === false) { // wont go inside
$scope.data = ['a','fancy','array'];
} else {
$scope.data = ['a','fancy','array'].slice(2);
}
console.log($scope.slice); // still true for both
}

The rule is that the controller should not be aware of the view... so you should instead pass something from the view to the controller using ngInit, like this:
<div ng-controller="MyCtrl">
<span ng-repeat="value in values">{{ value }}</span>
</div>
...
<span ng-controller="MyCtrl" ng-init="isDifferent = true">
<div ng-repeat="value in values">{{ value }}</div>
</span>
and then check isDifferent value in the controller.
Update: A plunker with working example: http://plnkr.co/edit/zUgLSQcAaZX5j6JBoQAO

<div ng-controller="MyCtrl" behavior=2>...
Please forgive my lazy js - I'm used to coffeescript
var MyCtrl = function($scope, $attrs){
if $attrs.behavior != 2
$scope.values = ['a','fancy','array'];
else
$scope.values = ['a','fancy','array'].slice(2);
}
I guess you could do something similar by swapping $attrs for $element and changing your test.

Related

Set value of input depending on element clicked in Angular

I have made the following plunker:
https://plnkr.co/edit/Ff2O2TGC4WLaD62fJmvA?p=preview
I would like the value of the input to be the item.name clicked.
Here is the code:
<body ng-app="myApp">
<div ng-controller="MyController">
<ul ng-repeat="item in collection">
<li ng-click="edit('{{item.name}}')">{{item.name}}</li>
</ul>
</div>
<input name="myinput" ng-model="myinput" />
</body>
Js:
var app = angular.module('myApp', [])
.controller('MyController', function($scope, $http) {
$scope.collection = [
{name:'foo'},
{name:'bar'},
{name:'foobar'},
{name:'barfoo'},
];
$scope.edit = function(current_name) {
this.myinput = current_name;
console.log(current_name);
}
})
So there are a few problems here. The first is how you're passing item.name into the edit function. Instead of edit('{{item.name}}') it should simply be edit(item.name).
The next is this.myinput in the script.js isn't going to work; it needs to be $scope.myinput.
Finally, the input in the markup needs to be inside the div that defines the controller.
I've modified the Plunkr to work: https://plnkr.co/edit/mslpklTaStKEdo64FpZl?p=info
Angular expression can't have interpolation tags. Correct syntax, like if it was normal Javascript:
<li ng-click="edit(item.name)">{{item.name}}</li>
You don't have to call a function. Just do.
<li ng-click="$parent.myinput = item.name">

ng-show not working for dynamically added HTML within my controller

Please see relevant JSFiddle
Within this code I dynamically added in sanitized HTML code using ng-bind-html but when assigning ng-show to the html it does not work. I tried using $compile but so far nothing as well.
I am trying to hide and show an element using ng-show but both are visible.
JS:
var app = angular.module('App', ['ngSanitize'])
app.controller('MyCtrl', function($scope, $compile) {
$scope.myHTML = [];
$scope.myHTML.push('<li ng-show = "visible(1)">Test1</li>');
$scope.myHTML.push('<li ng-show = "visible(0)>Test2</li>');
$scope.visible = function(arg)
{
if (arg == 1) return true;
if (arg == 0) return false;
}
$compile($scope.myHTML)($scope);
});
HTML:
<div ng-app="App">
<div ng-controller="MyCtrl">
<ul ng-repeat="snippet in myHTML" ng-bind-html="snippet"></ul>
</div>
</div>
Your controller should pretty much never be aware of markup, ever. That's the power of MVC. You should repeat across a real dataset and build up markup in your view. Something like the following, where you set items = [item1, item2] in a controller.
<div ng-app="HelloApp">
<div ng-controller="MyCtrl">
<ul ng-repeat="item in items">
<li ng-show = "test($index)">Test{{$index}}</li>
</ul>
</div>
</div>
If you really need to do it the way you're doing, you should use a custom directive and use angular.element to append your compiled html to the current directive element. ng-bind-html doesn't expect a compiled node, rather just an html string.
Your method is not true.
First , your ng-repeat is in ul, scope.myHTML will loop ul instead of adding DOM in ul, so you should ng-repeat in li. code like this:
<ul>
<li ng-repeat="snippet in myHTML" ng-bind-html="snippet" ng-show="snippet.visible">{{ snippet.content }}</li>
</ul>
app.controller('MyCtrl', function($scope, $compile) {
$scope.myHTML = [{content:'Test1', visible:1},{content:'Test2', visible:0}];
$scope.visible = function(arg)
{
if (arg == 1) return true;
if (arg == 0) return false;
}
});
Maybe, you want to just add DOM like jQuery. code like this:
<ul>
</ul>
app.controller('MyCtrl', function($scope, $compile) {
$scope.visible = function(arg)
{
if (arg == 1) return true;
if (arg == 0) return false;
}
$('ul').html($compile('<li ng-show="visible(1)">Test1</li><li ng-show="visible(0)">Test2</li>')($scope));
});
i used $timeout function it's working with me : sample code
$scope.allowDelete = false;
$scope.allowDeleteCount = '';
$timeout(function () {
$('div').append($compile('<button type="button" ng-show="allowDelete" class="btn btn-danger btn-sm btn-delete"><i class="fa fa-trash-o"></i> Delete <span>{{allowDeleteCount}}<span></button>')($scope))
},1000);

Can't access the variable from newly created filter variable of ng-repeat in angular

I have a ng-repeat like this :
<a class="item item-avatar" ng-click="loadProfile({{student.pi_id}})"
ng-repeat="student in filteredStudents = (students | filter:model.txtSearch)" >
<img src="./img/man.png">
<h2>{{student.pi_name}}</h2>
<p>{{student.pi_hp}}</p>
</a>
the question is how can I access the filteredStudents variable? as I can't access it by using $scope.filteredStudents; in the controller
When you are applying the filter in view the filtered value is not accessible in controller.
If you need the filtered data in your controller you need to do filtering in your controller like:
$scope.filteredData = $filter('filter')($scope.filteredStudents, $scope.model.txtSearch)
Inject filter in your controller
function YourController($scope, $filter)
{
}
then, use the filter in controller itself
$scope.filteredStudents = $filter('yourFilterName')(model.txtSearch);
then in html,
<a class="item item-avatar" ng-click="loadProfile({{student.pi_id}})" ng-repeat="student in filteredStudents" >...</a>
Check this SO question
Controllers execute before the view is rendered, which is why the controller function $scope is empty when it executes. You could access the $scope.filteredStudents from within an event handler, such as ngClick:
var app = angular.module('app',[]);
app.controller('ctrl', function($scope) {
$scope.test = function() {
alert ($scope.items);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<input type="text" ng-model="name" /> {{name}}
<div ng-repeat="i in items = ([1,2,3,4] | filter:name )">
{{i}}
</div>
<button ng-click="test()">Hey</button>
</div>
Alternatively, you can access $scope.filteredStudents by using $timeout:
app.controller('ctrl', function($scope,$timeout) {
$timeout(function() {
// $scope.filteredStudents is accessible here...
alert($scope.filteredStudents);
});
});
This works because the $timeout hander executes after the view is rendered. The javascript enclosure allows the $timeout handler to execute, and still access the controller's function context.

How to store variable in an AngularJS HTML template?

How can I store values to variable for example on click in angular? I have the following code which doesn't save the value into variable:
HTML:
<div ng-app='app'>
<a ng-controller="MyController" href="#" ng-click="variable = 1">
</a>
{{variable}}
</div>
Controller:
var app = angular.module('app',[]);
app.controller('MyController', function($scope)
{
});
jsfiddle code
Your variable binding {{variable}} should be inside controller's scope. So move ng-controller to an element that will contain variable binding.
You need to initialize the variable. See http://plnkr.co/edit/dmSNVJ3BGIeaWaddKtZe
<body ng-app="">
<button ng-click="count = 1" ng-init="count='not set'">
Increment
</button>
<span>
count: {{count}}
</span>
</body>
Use a function to set the variable:
HTML:
<div ng-app='app'>
<a ng-controller="MyController" href="#" ng-click="setVariable()">
</a>
{{variable}}
</div>
Controller:
var app = angular.module('app',[]);
app.controller('MyController', function($scope)
{
$scope.setVariable = function() {
$scope.variable = 1;
}
});
Your syntax is correct, what went wrong is you put your controller declaration in the wrong place.
You just need move it to the outer layer, no need for ng-init or function (but might be a better practice):
<div ng-app='app' ng-controller="MyController">
<a href="#" ng-click="variable=1">
click me!
</a>
{{variable}}
</div>
http://jsfiddle.net/ybavzec4/3/

Looping though an object in Angular and using the key inside a ng-show

i am creating a simple Angular.js tabbing box which changes the box that is active accoring to a value 'tab' that is used inside ng-show on the elements.
This is working fine, however, at the moment I am writing all the HTML statically and I would rather cut down my code into a simple ng-repeat loop to loop through all the divs.
This is easy enough in PHP as I would use a foreach loop and use the key to generate the tab number, I just can't seem to do this in Angular. Here is my code at the moment:
<div id="services-box-nav">
<ul>
<li>Rewards</li>
<li>Community</li>
<li>Partners</li>
<li>Jobs</li>
<li>Volunteering</li>
<li>Feedback</li>
<li>Gallery</li>
</ul>
</div>
<div id="services-content-boxes">
<div ng-show="tab == 1">
<div class="row">
<div class="col-md-12">
<h3>{{serviceBoxes.rewards.title}}</h3>
</div>
</div>
<div class="row">
<div class="col-md-5">
{{serviceBoxes.rewards.text}}
</div>
<div class="col-md-7">
</div>
</div>
</div>
<div ng-show="tab == 2">dwd</div>
<div ng-show="tab == 3">d</div>
<div ng-show="tab == 4">df</div>
<div ng-show="tab == 5">gr</div>
<div ng-show="tab == 6">r</div>
<div ng-show="tab == 7">rg</div>
</div>
controller('servicesController', function($scope, $location, joomlaService) {
$scope.serviceBoxes = {};
joomlaService.getArticleDetails(21).then(function(articleReturnData) {
$scope.serviceBoxes.rewards = articleReturnData;
});
joomlaService.getArticleDetails(22).then(function(articleReturnData) {
$scope.serviceBoxes.community = articleReturnData;
});
joomlaService.getArticleDetails(23).then(function(articleReturnData) {
$scope.serviceBoxes.partners = articleReturnData;
});
joomlaService.getArticleDetails(24).then(function(articleReturnData) {
$scope.serviceBoxes.jobs = articleReturnData;
});
joomlaService.getArticleDetails(25).then(function(articleReturnData) {
$scope.serviceBoxes.volunteering = articleReturnData;
});
joomlaService.getArticleDetails(26).then(function(articleReturnData) {
$scope.serviceBoxes.feedback = articleReturnData;
});
joomlaService.getArticleDetails(27).then(function(articleReturnData) {
$scope.serviceBoxes.gallery = articleReturnData;
});
});
What I want to do is loop through the serviceBoxes object and dynamically create the ng-show condition (tab == i) using the key, which should increment each time (1, 2, 3, 4, etc). I don't know how I go about this using Angular. It would cut down my code considerably so feel it is necessary.
Can anyone point out how this is done?
Thanks
You can use angular-ui bootstrap Tabset directive.
<tabset>
<tab ng-repeat="serviceBox in serviceBoxes" heading="{{serviceBox.title}}" active="serviceBox.active">
{{serviceBox.text}}
</tab>
</tabset>
Thus your view is clean and tidy.
And your controller will look like:
controller('servicesController', function($scope, $location, joomlaService) {
$scope.serviceBoxes = [];
joomlaService.getArticleDetails(21).then(function(articleReturnData) {
$scope.serviceBoxes.push(articleReturnData);
});
joomlaService.getArticleDetails(22).then(function(articleReturnData) {
$scope.serviceBoxes.push(articleReturnData);
});
joomlaService.getArticleDetails(23).then(function(articleReturnData) {
$scope.serviceBoxes.push(articleReturnData);
});
joomlaService.getArticleDetails(24).then(function(articleReturnData) {
$scope.serviceBoxes.push(articleReturnData);
});
joomlaService.getArticleDetails(25).then(function(articleReturnData) {
$scope.serviceBoxes.push(articleReturnData);
});
joomlaService.getArticleDetails(26).then(function(articleReturnData) {
$scope.serviceBoxes.push(articleReturnData);
});
joomlaService.getArticleDetails(27).then(function(articleReturnData) {
$scope.serviceBoxes.push(articleReturnData);
});
});
<ul>
<li ng-repeat="serviceBox in serviceBoxes">{{serviceBox.title}}</li>
</ul>
<div ng-repeat="serviceBox in serviceBoxes" ng-show="tab == {{selectedIndex}}">{{serviceBox.contents}}</div>
In your controller:
$scope.selectedIndex = 0; // Default selected index, use -1 for no selection
$scope.itemClicked = function ($index) {
$scope.selectedIndex = $index;
};
The ng-repeat directive loops through every element and makes a copy of the html element it's placed inside of. If there at 10 items to look through, you will have 10 html elements. It also you references to the index of the current element via $index.
ng-click will call the function on itemClicked(), passing in the current index through the $index reference that ng-repeat supplied. In our function we're using that parameter to set our $scope.selected to it.
I have tried creating something similar. Try below code
I have hardcoded mapTab array.You can populate myTab using the corresponding values from $scope
In controller-
$scope.tab;
$scope.mapTab=[{},{"1": "dwd"},{"2":"d"},{"3":"dwd"},{"4":"df"},{"5":"gr"},{"6":"r"},{"7":"rg"}];
In html--
<div ng-repeat="(key,val) in mapTab">
<div ng-repeat="prop in val">
<div ng-show="tab==key">{{prop}}</div>
</div>
</div>
</div>
Demo--http://jsfiddle.net/RahulB007/HB7LU/9348/

Resources