Here I'm trying to display some items in div During the tracing time i'm getting the values but why its not display in div
app.controller('Helloctrls', ['$scope', '$http', 'Servicemsgs', function ($scope, $http, Servicemsgs) {
$scope.localSearch = function (str) {
var ser = Servicemsgs.GetFun(str.description.CourseId);
ser.then(function (d) {
$scope.SerchDetails = d.data;
})
}
}])
Html
<div ng-controller="Helloctrls">
<div postit"" ng-cloak="" angucomplete-alt id="ex1_dropdown" placeholder="Search countries" pause="100" selected-object="localSearch"
local-data="Countries" search-fields="CourseName" title-field="CourseName" minlength="1" maximumlength="3" input-class="form-control form-control-small" match-class="highlight">
<div ng-repeat="ss in SerchDetails">
<ul>
<li>
{{ss.Action}}
</li>
<li>
{{ss.Countrolle}}
</li>
</ul>
</div>
</div>
</div>
Your response is not an array, it has only 1 object, change like this,
<div ng-repeat="ss in SerchDetails[0]">
<ul>
<li>
{{ss.Action}}
</li>
<li>
{{ss.Countrolle}}
</li>
</ul>
</div>
Related
I searched for the solution but could not find the exact solution so posted here.
I have a search bar in the header menu. When search content is typed and clicked on search button, the result needs to be display in a new page (eg. result.html). API is used to fetch the searched result.
I have added js pseudo code below which will explain what I intend to do.
Thank you for the suggestion.
navigation
<nav class="navbar navbar-default navbar-fixed-top navbar-search-box animate" role="navigation">
<div class="row">
<div class="collapse navbar-collapse" >
<ul class="nav navbar-nav" id="main-nav">
<li> ... </li>
<li>
<div class="search-bar-search animate">
<div class="container" ng-controller="searchCtrl">
<div class="input-group">
<input type="text" class="form-control" id="q" ng-model="q" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-primary" type="button" ng-click="search()">Search</button>
</span>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</nav>
Search.js
var app = angular.module('myApp', ['ngRoute']);
app.service('searchService', function($http) {
this.getResult = function(q) {
// o/p is in JSON format
return $http.get('http://mydomainname/api/search/'+q);
}
});
app.controller('searchCtrl', function ($scope, searchService){
$scope.search = function (){
var q = $scope.q;
searchService.getResult(q).then(function (response){
$scope.result = response.data;
// redirect to new template (result.html) and display result
...
...
});
};
});
I have a website where i show different questions and when you click in one appear the answer and if you click again dissapear. And i trying to do it in
Angular but for the moment i can't achive it.
<ul id="question-list">
<li>
<h1><a ng-click="answer = !answer" >What is this?</a></h1>
<h3 ng-show="answer"> this</h3>
</li>
<li>
<h1 >What is the question?</h1>
<h3>It </h3>
</li>
<li>
<h1>What is the question?</h1>
<h3> Ipsum.</h3>
</li>
Angular Code
ehlApp.controller('faqController', function ($scope) {
$scope.answer = true;
});
The code you posted worked perfectly in a properly set up app, so I'm guessing that's the problem.
<div ng-app="app" ng-controller="ctrl">
<ul id="question-list">
<li>
<h1><a ng-click="answer = !answer">What is this?</a></h1>
<h3 ng-show="answer"> this</h3>
</li>
<li>
<h1>What is the question?</h1>
<h3>It </h3>
</li>
<li>
<h1>What is the question?</h1>
<h3> Ipsum.</h3>
</li>
</ul>
</div>
<script>
var app = angular.module('app',[]);
app.controller('ctrl', function ($scope) {
$scope.answer = true;
});
</script>
Each question have there own answers so to display the answer attached jsbin
HTML :
<div ng-app="myApp">
<div ng-controller="MyCtrl as vm">
<ul id="question-list" >
<li ng-repeat = "questionAns in vm.questionList">
<h1 ng-click="questionAns.showAnswer = !questionAns.showAnswer"> <a ng-bind="questionAns.question"></a></h1>
<h3 ng-show="questionAns.showAnswer" ng-bind="questionAns.answer"></h3>
</li>
</ul>
</div>
JAVASCRIPT :
var app = angular.module("myApp",[]);
app.controller("MyCtrl", ["$scope", function ($scope) {
var vm = this;
vm.questionList = [{
"question" : "What is this question 1?",
"answer" : "this is answer1"
},{
"question" : "What is this question 2?",
"answer" : "this is answer2"
}];
}]);
jsbin to show hide
You can do that all in the template, example:
<p ng-click="x=!x">Something<span ng-show="x"> else</span>.</p>
Clicking on the <p> will make the <span> show and disappear.
<div ng-app="app" ng-controller="control">
<ul id="question-list">
<li>
<h1><a ng-click="answer = !answer">What is this?</a></h1>
<h3 ng-show="answer"> this</h3>
</li>
,<li>
<h1 ng-click="answer = !answer">What is the question?</h1>
<h3 ng-show="answer">It </h3>
</li>
<li>
<h1 ng-click="answer = !answer">What is the question?</h1>
<h3 ng-show="answer"> Ipsum.</h3>
</li>
</ul>
</div>
<script>
var app = angular.module('app',[]);
app.controller('control', function ($scope) {
$scope.answer = true;
});
</script>
I am receiving an error message TypeError: Cannot read property 'slice' of undefined while attempting to use Bootstrap Pagination. I believe the error is taking place due to a scope issue while attempting to apply the .slice() method on items in ng-repeat.
I have included the code where I believe the issue is occurring. I have been using this post - AngularJS pagination and Cannot read property 'slice' of undefined as a guide to resolving the problem I'm having.
Controllers.js:
defaultPage = angular.module('DefaultPage', ['ui.bootstrap']);
defaultPage.controller('DefaultController', ['$scope', '$http', function ($scope, $http) {
$scope.data = {};
$scope.totalItems = $scope.ctrl.info.length;
//console.log($scope.ctrl.info.length)
$scope.itemsPerPage = 25;
$scope.currentPage = 1;
$scope.max = "3";
$scope.pageCount = function () {
var begin = (($scope.currentPage - 1) * $scope.itemsPerPage);
//console.log(begin)
var end = begin + $scope.itemsPerPage;
//console.log(end)
$scope.totalItems = $scope.items.slice(begin, end);
console.log($scope.items)
};
}]);
HTML:
<div class="main" ng-controller="DefaultController as ctrl">
<div class="search">
<h1 class="shadow"></h1>
<div class="searchbox">
<i class="fa fa-search"></i>
<input ng-model="query" placeholder="Search Issue Title or Case #" autofocus>
</div>
</div>
<ul class="channellist">
<li ng-repeat="items in ctrl.info | filter: query | filter: issue" class="channel cf">
<a ng-href="#/issues/{{ctrl.info.indexOf(items)}}">
<img ng-src="{{items.user.avatar_url}}" alt="channel logo for {{items.user.avatar_url}}" />
<div class="info">
<h2 class="userName">{{items.user.login}}</h2>
<h4 class="case">case: #{{items.number}}</h4>
<h4 class="case">issue status: {{items.state}}</h4>
<div class="main">
<h3 class="title">{{items.title}}</h3>
<p class="body">{{items.body}}</p>
</div>
<div class="label_info">
<ul>
<li class="mark">Created:</li>
<li class="mark"> {{items.created_at}}
</li>
<li class="mark">Updated:</li>
<li class="mark"> {{items.updated_at}}</li>
</ul>
</div>
</div>
</a>
</li>
<uib-pagination boundary-links="true" max-size="max" items-per-page="itemsPerPage" total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()"></uib-pagination>
</ul>
</div>
You can't slice something that does not exist, try to define items first.
I'm trying to call the function on clicking on List item using Angular JS. But, its not getting called. But, its working for a button.
HTML
<div ng-controller="Ctrl">
<button class="btn" ng-click="changeLanguage('en')" translate="BUTTON_LANG_EN" class="ng-scope">english</button>
<button class="btn" ng-click="changeLanguage('de')" translate="BUTTON_LANG_DE" class="ng-scope">espanol</button>
</div>
<div class="nav">
<div>Select Language</div>
<ul>
<li><img src="img/16.png">English</li>
<li><img src="img/13.png"><a href="" ng-click="changeLanguage('de')" >Español</a></li>
</ul>
</div>
JavaScript
var app = angular.module('at', ['pascalprecht.translate']);
app.config(function ($translateProvider) {
$translateProvider.translations('en', { // Translate w.r.t English.
BUTTON_LANG_EN: 'English',
BUTTON_LANG_DE: 'Español',
Charcoal:'Charcoal Hoodie',
CrestCrewNeck:'Crest Crew Neck',
GeoLoveCrewNeck:'Geo Love Crew Neck',
NavyHoodie:'Navy Hoodie',
BrainiacTShirt:'Brainiac T Shirt',
CrestTShirt:'Crest T Shirt',
GeometricTShirt:'Geometric T Shirt',
SellMoreManTShirt:'Sell More Man T Shirt'
});
$translateProvider.translations('de', { // Translate w.r.t Spanish.
BUTTON_LANG_EN: 'Englisch',
BUTTON_LANG_DE: 'Español',
Charcoal: 'Hoodie carbón',
CrestCrewNeck:'Cresta del cuello de equipo',
GeoLoveCrewNeck:'Geo amor del cuello de equipo',
NavyHoodie:'Hoodie Navy',
BrainiacTShirt:'Brainiac T Shirt',
CrestTShirt:'Cresta T Shirt',
GeometricTShirt:'Geométrico T Shirt',
SellMoreManTShirt:'Vender más hombre T Shirt'
});
$translateProvider.preferredLanguage('en'); // On page load with English content.
});
app.controller('Ctrl', function ($scope, $translate) { // Inject $translate.
$scope.changeLanguage = function (key) {
$translate.uses(key); // Based on the Key.
};
});
Can you please check the code?
Problem is that Your list is not under controller
Your code
<div ng-controller="Ctrl">
<!--Your controller scope-->
</div>
<div class="nav">
<ul>
<li><img src="img/16.png">English</li>
<li><img src="img/13.png"><a href="" ng-click="changeLanguage('de')" >Español</a></li>
</ul>
</div>
Change it to, Bring nav div under controller
<div ng-controller="Ctrl">
<div>
<button class="btn" ng-click="changeLanguage('en')" translate="BUTTON_LANG_EN" class="ng-scope">english</button>
<button class="btn" ng-click="changeLanguage('de')" translate="BUTTON_LANG_DE" class="ng-scope">espanol</button>
</div>
<div class="nav">
<div>Select Language</div>
<ul>
<li><img src="img/16.png">English</li>
<li><img src="img/13.png"><a href="" ng-click="changeLanguage('de')" >Español</a></li>
</ul>
</div>
</div>
I'm new to angular and i'm trying to use ng-switch to dynamically load templates using include in bootstrap modal but click doesn't seem to work. What am i doing wrong here ?
HTML
ModalContent.html
<div ng-controller="Nav" class="modal-body">
<div class="left-nav" ng-include="'LeftNav.html'"></div>
<div class="right-nav" ng-include="'RightNav.html'"></div>
</div>
LeftNav.html
<ul>
<li ng-repeat="item in items">
{{ item }}
</li>
</ul>
RightNav.html
<div ng-switch on="page">
<div ng-switch-when="Item1">
<div ng-include="'Item1.html'"></div>
</div>
<div ng-switch-when="item2">
<div ng-include="'Item2.html'"></div>
</div>
<div ng-switch-when="item3">
<div ng-include="'Item3.html'"></div>
</div>
<div ng-switch-default>
<h1>Default</h1>
</div>
</div>
JS
var app = angular.module('plunker', ['ngRoute', 'ui.bootstrap']);
app.controller('Nav', function($scope) {
$scope.items = ['Item1', 'Item2', 'Item3'];
})
Plnkr - http://plnkr.co/edit/D1tMRpxVzn51g18Adnp8?p=preview
There were a couple of problems.
Here is a working demo: http://plnkr.co/edit/CZPvD373HbCC2Ism0xlA?p=preview
Comments inline:
Controller
app.controller('Nav', function($scope) {
$scope.items = ['Item1', 'Item2', 'Item3'];
$scope.page = $scope.items[0];
$scope.selectItem = function (item) {
$scope.page = item;
}
})
LeftNav template
<ul>
<li ng-repeat="item in items">
<!-- calling `selectItem` on the controller to set the `page`
otherwise `page` will be set on the current `ng-include` scope
and will be unavailable elsewhere -->
{{ item }}
</li>
</ul>
RightNav template
<!-- 'page' is now from the 'Nav' controller's $scope -->
<div ng-switch on="page">
<div ng-switch-when="Item1">
<div ng-include="'Item1.html'"></div>
</div>
<!-- String matches are case sensitive -->
<div ng-switch-when="Item2">
<div ng-include="'Item2.html'"></div>
</div>
<!-- String matches are case sensitive -->
<div ng-switch-when="Item3">
<div ng-include="'Item3.html'"></div>
</div>
<div ng-switch-default>
<h1>Default</h1>
</div>
</div>