I am trying do a dynamic bind a < tabset> based on the selected value of dropdownlist.
Here is my app.js
var app = angular.module('app',['ui.bootstrap']);
app.controller('tabCtrl',function($scope,$http){
$scope.countryList=[{name:'Canada',id:'ca'},{name:'United States',id:'us'}];
$scope.selectedCountry =$scope.countryList[1].id;
$scope.init = function() {
$scope.countries =[{countryName:"ca"},{countryName:"us"}];
$scope.countries[0].tabs=[{title:"CA Title 1"},{title:"CA Title 2"}];
$scope.countries[1].tabs=[{title:"US Title 1"},{title:"US Title 2"}];
};
$scope.switch = function(){
console.log($scope.selectedCountry);
}
});
And this is my jsp page.
<%#taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%# page contentType="text/html;charset=UTF-8" language="java" %>
<html ng-app="app">
<head>
<script src="<c:url value="/resources/javascript/angular.min.js" />"></script>
<script src="<c:url value="/resources/javascript/ui-bootstrap-tpls-0.12.0.min.js" />"></script>
<script src="<c:url value="/resources/javascript/app.js"/>"></script>
<link href="<c:url value="/resources/style/bootstrap.min.css" />" rel="stylesheet">
<title></title>
</head>
<body>
<br />
<div ng-controller="tabCtrl" >
<!--<select ng-model="selectedCountry" ng-options="c.id as c.name for c in countryList" ng-change="switch()" />-->
<form name="frm" ng-submit="submit()" data-ng-init="init()">
<div ng-repeat="c in countries|filter:{countryName:selectedCountry}">
<tabset>
<tab ng-repeat="t in c.tabs" heading="{{t.title}}">
</tab>
</tabset>
</div>
<button class="btn btn-primary" type="submit">Submit</button>
</form>
</div>
</body>
</html>
I have two bindings, one is for dropdownlist, one is for tabset.
My problem is if I add < select >, then my tabset does not show up..
Please help.
Thank you
Please make sure that you close select tag
<select ng-model="selectedCountry" ng-options="c.id as c.name for c in countryList" ng-change="switch()"></select>
Working demo below
var app = angular.module('app', ['ui.bootstrap']);
app.controller('tabCtrl', function($scope, $http) {
$scope.countryList = [{
name: 'Canada',
id: 'ca'
}, {
name: 'United States',
id: 'us'
}];
$scope.countries = [{
countryName: "ca"
}, {
countryName: "us"
}];
$scope.selectedCountry = $scope.countryList[1].id;
$scope.init = function() {
$scope.countries[0].tabs = [{
title: "CA Title 1"
}, {
title: "CA Title 2"
}];
$scope.countries[1].tabs = [{
title: "US Title 1"
}, {
title: "US Title 2"
}];
};
$scope.switch = function() {
console.log($scope.selectedCountry);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js"></script>
<div ng-app="app">
<div ng-controller="tabCtrl" data-ng-init="init()">
<select ng-model="selectedCountry" ng-options="c.id as c.name for c in countryList" ng-change="switch()"></select>
<hr/>
<form name="frm" ng-submit="submit()">
<div ng-repeat="c in countries|filter:{countryName:selectedCountry}">
<tabset>
<tab ng-repeat="t in c.tabs" heading="{{t.title}}">
</tab>
</tabset>
</div>
<button class="btn btn-primary" type="submit">Submit</button>
</form>
</div>
This is because ng-options tracks by object reference by default. If you want to track by id then you should add the following track by clause:
ng-options="c.id as c.name for c in countryList track by c.id"
Then, when you initialize the selectedCountry you need an object with an id property:
$scope.selectedCountry = { id: $scope.countryList[1].id }
Otherwise, your filter ({countryName:selectedCountry}) is not matching anything in the countries array. This causes <tabset> not to render.
Related
when we selecting the list from dropdown i want to show the different images.If we have option like this Option1, Option2 when selecting the option1 i want show option1.img and selecting the option2 i want show option2.image.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<script>
angular
.module('myApp', [])
// controller here
.controller('myCtrl', function($scope) {
$scope.selectables = [
{ label: 'A', value: 'C:/Users/sp/OneDrive/Pictures/logo.jpg'},
{ label:'B', value:'C:/Users/sp/OneDrive/Pictures/spt logo.jpg'}
];
// this is the model that's used for the data binding in the select directive
// the default selected item
})
</script>
<div ng-controller="myCtrl">
<select
ng-model="selectedItem"
ng-options="S.value as S.label for S in selectables" ng-change="fun()">
</select>
{{selectedItem}}
<img src='{{selectedItem}}'/>
</div>
</body>
</html>
I am write this code but i am not able to showing the option first. Can you anyone please help me how to do that.
Everything is fine in your code it's just you didn't define your module name
ng-app='myApp' the moment I have added it, it worked !
below is the code snippet.
angular
.module('myApp', [])
.controller('myCtrl', function($scope) {
$scope.selectables = [{
label: 'A',
value: 'data:image/jpeg;base64,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'
}, {
label: 'B',
value: 'data:image/png;base64,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'
}];
})
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app='myApp' ng-controller="myCtrl">
<select ng-model="selectedItem" ng-options="S.value as S.label for S in selectables" ng-change="fun()">
</select>
<img ng-src='{{selectedItem}}'/>
</div>
</body>
</html>
<select
ng-model="selectedItem"
ng-options="S.value as S.label for S in selectables" ng-change="fun()">
</select>
{{selectedItem}}
<img src='{{selectedItem}}'/>
DEMO
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<script>
angular
.module('myApp', [])
.controller('myCtrl', function($scope) {
$scope.selectables = [{
label: '',
value: 'C:/Users/sp/Pictures/111.png'
}, {
label: 'CR00-1511-003352',
value: 'C:/Users/sp/Pictures/222.png'
},{
label: 'ED05-1511-003353',
value: 'C:/Users/sp/Pictures/333.png'
},{
label: 'ED05-1511-003356',
value: 'C:/Users/sp/Pictures/444.png'
},{
label: 'ED05-1511-003360',
value: 'C:/Users/sp/Pictures/666.png'
}, {
label: 'HL01-1511-003364',
value: 'C:/Users/sp/Pictures/777.png'
}];
})
</script>
<div ng-app='myApp' ng-controller="myCtrl">
<select ng-model="selectedItem" ng-options="S.value as S.label for S in selectables" ng-change="fun()">
</select>
<br><br><br>
<img src='{{selectedItem}}'/>
</div>
</body>
</html>
I'm new to AngularJS and am trying to use it to link up with a simple web API I have in place. I already have URLs that return JSON data in the format: http://127.0.0.1:8000/posts/ followed by a date in the format YYYY-MM-DD. (example would be http://127.0.0.1:8000/posts/2015-07-28)
I have an input text box which I want to use to get the JSON data from my API and list it out, meaning if I enter 2015-07-28 into the input box, it should pull the JSON data from the API appropriately without a page refresh by appending the string value from the input box onto whatever URL I want (in this case that would be http://127.0.0.1:8000/posts/).
Here is what I have as of right now:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script>
var ListingApp = angular.module('ListingApp', []);
ListingApp.controller('PostCtrl', function($scope, $http) {
$scope.select = "";
var postJSON = "http://127.0.0.1:8000/posts/" + $scope.select;
console.log(postJSON);
$http.get(postJSON)
.then(function(res) {
$scope.posts = res.data;
console.log($scope);
});
});
</script>
</head>
<body ng-app="ListingApp">
<div ng-controller="PostCtrl">
<form name="dateForm">
<input type="text" id="dp" name="datepicker" ng-model="select" placeholder="Enter Date">
</form>
<span ng-bind="select" style="color: red">{{ dateForm.datepicker }}</span>
<ul>
<li ng-repeat-start="post in posts">
pk: {{ post.pk }}
</li>
<li>
author: {{ post.author }}
</li>
<li ng-repeat-end>
category: {{ post.category }}
</li>
</ul>
</div>
<!-- Importing jQuery -->
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</body>
</html>
Use ng-change or watch your model. Depending on your input you may want to use the debounce in ng-model-options.
var ListingApp = angular.module('ListingApp', []);
ListingApp.controller('PostCtrl', function($scope, $http) {
$scope.select = "";
var postJSON = "http://127.0.0.1:8000/posts/" + $scope.select;
console.log(postJSON);
function getPost() {
$http.get(postJSON)
.then(function(res) {
$scope.posts = res.data;
console.log($scope);
});
}
// option #1 with ng-change="change()"
$scope.change = function() {
getPost();
}
// option #2 with watch
$scope.$watch('select', function (val, old) {
console.log(val);
getPost();
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
</head>
<body ng-app="ListingApp">
<div ng-controller="PostCtrl">
<form name="dateForm">
<input type="text" id="dp" name="datepicker" ng-model-options="{ debounce: 500 }" ng-change="change()" ng-model="select" placeholder="Enter Date">
</form>
<span ng-bind="select" style="color: red">{{ dateForm.datepicker }}</span>
<ul>
<li ng-repeat-start="post in posts">
pk: {{ post.pk }}
</li>
<li>
author: {{ post.author }}
</li>
<li ng-repeat-end>
category: {{ post.category }}
</li>
</ul>
</div>
<!-- Importing jQuery -->
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</body>
</html>
I want to get the ID of selected option in datalist, using select it is easy but I dont know how to get the ID of the option name.
I made one code snippet at JSBIN
var app = angular.module('app', []);
app.controller('getLocalityId', function($scope) {
$scope.localityList = [{
name: "Rome",
id: 1
}, {
name: "London",
id: 2
}, {
name: "Paris",
id: 3
}];
$scope.fetchId = function(id) {
console.log(id);
};
});
HTML goes like this
<!DOCTYPE html>
<html ng-app='app'>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="col-lg-6" ng-controller="getLocalityId">
<label for="locality">Locality</label>
<input class="input form-control" placeholder="Search By Name" list="locality" ng-model="obj.id" ng-change="fetchId(obj.id)" />
<datalist id="locality" name="locality">
<select>
<option ng-repeat=" obj in localityList" value="{{ obj.name }}" selected-value="{{ obj.id }}">{{ obj.id }}</option>
</select>
</datalist>
</div>
</body>
</html>
Use ng-options in your case:
<select ng-model="currentID" ng-options="obj.id as obj.name for obj in localityList"></select>
Demo
I want to add data at the time of onclick event. Need to load image at the time of onclick event, after a small time interval add data. But my image is continuously loading. Any body give any suggestion.
My code is:
<!DOCTYPE html>
<head>
<title>Learning AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" type="text/javascript"></script>
<script language="javascript">
function ContactController($scope) {
$scope.contacts = [];
$scope.items = [ ];
$scope.add = function() {
setTimeout(function() {
$scope.$apply(function() {
$scope.items[0].lateLoader = ' xxxx ';
});
}, 1000);
$scope.count=$scope.count+1;
$scope.contacts.push($scope.newcontact);
$scope.newcontact = "";
}
}
</script>
</head>
<body >
<div ng-app="" ng-controller="ContactController">
<p>{{items.lateLoader}}
<i ng-hide="items.lateLoader"><img src="Filling broken ring.gif"></i>
</p>
{{ contacts.length }}
Content:<input type="text" ng-model="newcontact" />
<button ng-click="add()">Add</button>
<ul style="list-style-type: none;">
<li ng-repeat="contact in contacts"> <input name="" type="checkbox" value="">{{ contact }}</li>
</ul>
</div>
</body>
</html>
In your example I found a lot of mistakes. The HTML tag is not defined at the top, wrong use of angularJs and Angular module is not created properly etc.
I fixed all the mistakes. I hope it can help you.
Plunkr link: http://plnkr.co/edit/no8WOHdEc9wc3dHzzITv?p=preview
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>Learning AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script >
angular.module("app",[]).controller('ContactController',['$scope',
function($scope) {
$scope.contacts = [];
$scope.items = [];
$scope.add = function() {
setTimeout(function() {
$scope.$apply(function() {
$scope.items.lateLoader = 'xxxx ';
});
}, 1000);
//$scope.count=$scope.count+1;
$scope.contacts.push($scope.newcontact);
$scope.newcontact = "";
}
}
]);
</script>
</head>
<body >
<div ng-controller="ContactController">
<p>{{items.lateLoader}}
<i ng-hide="items.lateLoader">
<img src="https://encrypted-tbn1.gstatic.com
/images?q=tbn:ANd9GcQTaHe0F0J39SXbiRF43pz2wtyfD6kypCMrLxhWPkq9EACNgwO0iaMbJFM">
</i>
</p>
{{contacts.length}}
Content:<input type="text" ng-model="newcontact" />
<button ng-click="add()">Add</button>
<ul style="list-style-type: none;">
<li ng-repeat="contact in contacts">
<input name="" type="checkbox" value="">{{ contact }}
</li>
</ul>
</div>
</body>
</html>
And for more detail of angularJs please visit these links:(https://angularjs.org/)
(http://www.w3schools.com/angular/default.asp)
I have a working table with a filter:
http://plnkr.co/edit/WnV7OUplcLHVOKbeTrSw?p=preview
After wrapping it in a tabset it stops working (the filter is still updated):
http://plnkr.co/edit/8uw2UhSC59txms5X563L?p=preview
But it worked with old versions before I updated:
http://plnkr.co/edit/eJvYtpc3efkydsQy8caL?p=preview
(angular 1.0.8 + bootstrap 2.0.3 + angular-ui-bootstrap-0.6.0)
Why did it stop working after the update?
http://plnkr.co/edit/70sLuA4gltgxhwTE0XT1
HTML (Just modified the filter usage)
<!doctype html>
<html ng-app="plunker">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="TabsDemoCtrl">
<tabset>
<tab heading="broken filter">
<form class="form-inline" role="form">
<select id="okFilterbox" ng-model="okFilterBool">
<option>nothing</option>
<option>all</option>
</select>
</form>
<p>{{okFilterBool}}</p>
<div>
<table>
<tr ng-repeat="item in items | filterItem:okFilterBool">
<td>{{item.name}}</td>
</tr>
</table>
</div>
</tab>
<tab heading="tab2">
</tab>
</div>
</body>
</html>
JS (Changed the way the filter is defined to make a new 'Angular' filter)
angular.module('plunker', ['ui.bootstrap']);
var TabsDemoCtrl = function ($scope) {
$scope.okFilterBool = "all";
$scope.items = [
{ name: 'A'},
{ name: 'B'},
{ name: 'C'}
];
};
angular.module("plunker").filter("filterItem", function(){
return function(array, okFilterBool){
if(okFilterBool == "all"){ return array; }
return [];
}
})