Develop Reference

AngularJs : ng-click() accepting invalid arguments

I use the following code snippet to list an array of objects in html document
, it shows the list of link accurately ...
<div ng-repeat="item in List">
<a ng-click="Show('{{item.name}}');"> ShowName </a>
</div>
it outputs the following html code:
<a ng-click="Show('name1')">ShowName</a>
.
.
.
<a ng-click="Show('//upto nth name')">ShowName</a>
Here is my angular code :
$scope.Show=
function(getName)
{
alert(getName);
}
but when I click on any link it shows "{{item.name}}" instead of showing "name1" or respective name in the alertbox...
I also tried
Show('{{item.name}}');
but the result is same...
what I am doing wrong????

You are not supposed to use {{}} inside an Angular directive. Your code should be like this:
<div ng-repeat="item in List">
<a ng-click="Show(item.name)"> ShowName </a>
</div>

You can either use following style
<li ng-repeat="item in List">
{{item.name}}
</li>
here $index represent index of your array. i prefer to use this because here you can access full object.then just do what you want.
$scope.clickit = function(x) {
console.log($scope.List[x])
}
if you don't like the above style you can use the below style
<li ng-repeat="item in List">
{{item.name}}
</li>

The problem here is that you are using ' and {} when passing the variable as an argument to the function.
Change
<a ng-click="Show('{{item.name}}');"> ShowName </a>
to
<a ng-click="Show(item.name);"> ShowName </a>

Angular HTTP request follow link to another endpoint

I am using ng-repeat to print a list of posts to the page via the WordPress REST-API. I am using Advanced Custom Fields on each post. From what I can see everything is working, but the post data is not showing in one container, yet it is displaying in another. I should also mention that this is set up like tabs. (user clicks a tab for a post and it displays that posts data)
Here is the code:
var homeApp = angular.module('homeCharacters', ['ngSanitize']);
homeApp.controller('characters', function($scope, $http) {
$scope.myData = {
tab: 0
}; //set default tab
$http.get("http://bigbluecomics.dev/wp-json/posts?type=character").then(function(response) {
$scope.myData.data = response.data;
});
});
homeApp.filter('toTrusted', ['$sce',
function($sce) {
return function(text) {
return $sce.trustAsHtml(text);
};
}
]);
HTML:
<section class="characters" ng-app="homeCharacters" ng-controller="characters as myData">
<div class="char_copy">
<h3>Meet the Characters</h3>
<div ng-repeat="item in myData.data" ng-bind-html="item.content | toTrusted" ng-show="myData.tab === item.menu_order">
<!--this is the section that will not display-->
<h3>{{ item.acf.team }}</h3>
<h2>{{ item.acf.characters_name }} <span>[{{item.acf.real_name}}]</span></h2>
<p class="hero_type">{{ item.acf.hero_type }}</p>
{{ item.acf.description }}
Learn More
</div>
</div>
<div class="char_tabs">
<!--if I put the identical {{}} in this section it WILL display-->
<nav>
<ul ng-init="myData.tab = 0" ng-model='clicked'>
<li class="tab" ng-repeat="item in myData.data" ng-class="{'active' : item.menu_order == myData.tab}">
<a href ng-click="myData.tab = item.menu_order">
<img src="{{ item.featured_image.source }}" />
<h3>{{ item.title }}</h3>
</a>
</li>
</ul>
</nav>
</div>
</section>
I should also mention that I use Ng-inspector, and it does show the data being pulled in. I can confirm this via the console. I have checked to ensure no css is in play; the div is totally empty in the DOM.
I appreciate all the help the GREAT angular community has shown!

Ng-click changing key,value pair

I have a ng-repeat like this:
<div ng-app="myApp" ng-controller="Ctrl">
{{ctrlTest}}<hr/>
<div ng-repeat="elements in filter">
<div>
<li ng-repeat="(key,value) in filter.producers" ng-show="value">
{{key}}<a ng-click="filter.producers.key=false"> X</a>
</li>
</div>
{{filter.producers}}
</div>
angular.module('myApp', [])
.controller('Ctrl', function($scope) {
$scope.ctrlTest = "Filters";
$scope.filter = {"producers": {"Ford":true,"Honda":true,"Ferrari":true}}
});
I am trying to make a ng-click that would set each label to false when clicking in a link, but I haven't achieved to do it properly as the key values are not fixed (they should be treated as variables).
So far I have tried it his way.
http://jsfiddle.net/Joe82/wjz8270z/5/
Thanks in advance!
Ps: I cannot change the json structure.

You just need to access the element of object by its key, to ensure that there references would not get lost & binding will work
<li ng-repeat="(key,value) in filter.producers" ng-show="value">
{{key}}<a ng-click="filter.producers[key]=false"> X</a>
</li>
Forked Fiddle

You also call a function and set value false
HTML
<li ng-repeat="(key,value) in filter.producers" ng-show="value">{{key}} {{value}}<a ng-click="setValue(key)"> X</a>
JS
$scope.setValue = function(key){
$scope.filter.producers[key.toString()] = false;
}
see this link http://jsfiddle.net/wjz8270z/8/

Having trouble repeating correct items with nested ng-repeat and ng-if

I have the following html:
<div ng-repeat="tab in tabs" ng-if="tabIsActive(tab, $index)">
<ul ng-repeat="section in tab.sections">
<h2 ng-class="productTitle" ng-repeat="child in section.children" ng-if="sideTabIsActive(section, $index)">
<img ng-src="{{ child.productImageURL }}"/>
<li>{{ child.title }}</li>
</ul>
</div>
This is what the "tabs" javascript object looks like:
My desired output is the subcategory titles(e.g. children0.title) and image(e.g. children0.productImageURL) listed for each section when that section is selected.
Example desired output:
When Analytical Balances is clicked
(ML image) //which is section0.child0.productImageURL
ML //which is section0.child0.title
(XS image) //which is section0.children1.productImageURL
XS //which is section0.child1ren.title
Currently, I display this:
When Analytical Balances is clicked:
(ML image) //which is section0.children0.productImageURL
ML //which is section0.children0.title
(XPE image) //which is section1.children0.productImageURL
XPE //which is section1.children0.title
How can I list both children (and the associated image) for each section based on which section is selected (selectedSideIndex)?
In addition to the above HTML, here is relevant HTML and javascript that I use in my attempt to achieve the desired output:
$scope.toggleSideSelect = function(ind){
$scope.selectedSideIndex = ind;
}
$scope.sideTabIsActive = function (tab, $index) {
var selectedIndexTest = $scope.selectedSideIndex
return $index==$scope.selectedSideIndex;
}
<div ng-repeat="tab in tabs" ng-if="tabIsActive(tab, $index)">
<ul ng-repeat="section in tab.sections" ng-click="toggleSideSelect($index)">
<li>{{ section.title }}</li>
<ul ng-repeat="child in section.children">
<li>{{ child.title }}</li>
</ul>
</ul>
</div>

You were almost there :)
What you need to do is this:
<div ng-repeat="tab in tabs" ng-if="tabIsActive(tab, $index)">
<ul ng-repeat="section in tab.sections" ng-init="sectionIndex = $index">
<h2 ng-class="productTitle" ng-repeat="child in section.children" ng-if="sideTabIsActive(section, sectionIndex)">
<img ng-src="{{ child.productImageURL }}"/>
<li>{{ child.title }}</li>
</ul>
</div>
This way, using the ng-init="sectionIndex = $index" you are saving the $index of the section and can use it on the nested ng-repeat. It's also possible to use $parent.$index but I wouldn't recommend it since the structure might change and you will be left with a bug.
This way, you can call ng-if="sideTabIsActive(section, sectionIndex)" using the index of the section, and only your active section's children will get to show.
Edit: you should probably change the signature of
$scope.sideTabIsActive = function (tab, $index)
to
$scope.sideTabIsActive = function ($index)
Since you're not actually using the tab in the function. (And if you do, don't forget to change the call to that function from the view as well)

angular expression working inside a script tag

How do I get an angular expression working inside a script tag... I am pretty new to this and need help?
Here is an example of my java script code:
<script id="modal-2.html" type="text/ng-template">
<div class="modal transparent">
<div class="card">
<i class="icon ion-ios7-close close-modal" ng-click="closeModal(2)"></i>
<div class="item item-divider">
{{card.title}}
</div>
<div class="item item-text-wrap">
{{card.details}}
</div>
</div>
</div>
</script>
Here is an example of my array:
.controller('TodoCtrl', function($scope, $ionicPopup, $timeout, $ionicModal, $ionicSideMenuDelegate) {
$scope.cardss =
{id:1, title:'Frank', src:'img/Frank.png',details:'This will be the products description!'},
{id:2, title:'Generali', src:'img/Generali.png',details:'This will be the products description!'},
{id:3, title:'John Lewis', src:'img/JohnLewis.png',details:'This will be the products description!'},
];

There is nothing special wrt use of AngularJS expressions inside partial templates.
As already said your model is actually array - so you'll have to iterate through the items using ng-repeat like this:
<ul>
<li ng-repeat="card in cards">
Card id: {{card.id}}
Card title: {{card.title}}
Card details: {{card.details}}
</li>
</ul>
Please see working JSFiddle example.

Here is an example how you can use your template:
<div ng-include src="'modal-2.html'"></div>
or use it with a button:
<button ng-click="currentTpl='modal-2.html'">Show Modal</button>
<div ng-include src="currentTpl"></div>
The expression in the template then works as is usual.
Here is an example.