I am working with angularjs. I have a table with data column which has hyperlink and when clicked in <td> data the 'prID' is passed to the URL as shown in the demo. But issue is for some of the rows in the table i have multiple prID's passed, when clicked on it, it is passing all the prID's instead i want to pass only one prID on which user mouse over and click on that ID.
DEMO:
https://plnkr.co/edit/sWbpovAT7II1eM4yRA2X?p=preview
example: For second row in the table i have values 2; 30; 21 . When user mouseover and click on it currently it is passing 2; 30; 21 in the URL instead i want to pass single value at a time. When user mouse over on 2 it should pass value 2 and when mouseover on 30, it should pass 30...This way i have couple of rows with multiple prIDs and the data is dynamic.
sample code:
<table border="1">
<tr ng-repeat="data in dataInfo">
<td> {{data.prID}}</td>
</tr>
</table>
You need nested loop when multiple ID on data.prID. Please try this way:
<tr ng-repeat="data in dataInfo">
<td><span ng-repeat="link in data.prID.split(';')"> {{link}}<span ng-if="!$last">;</span></span></td>
</tr>
Here's the code I've edited from Hanif
// Code goes here
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DataCtrl', function ($scope) {
$scope.dataInfo = [
{
"prID": "1",
"name": "Fight Club",
"desc": "Brad"
},
{
"prID": "2; 30; 21",
"name": "Matrix (Series)",
"desc": "Keanu Reeves"
},
{
"prID": "33",
"name": "V for Vendetta",
"desc": "Hugo Weaving"
},
{
"prID": "13",
"name": "V for Vendetta",
"desc": "Hugo Weaving"
},
{
"prID": "111; 55",
"name": "V for Vendetta",
"desc": "Hugo Weaving"
},
{
"prID": "3",
"name": "V for Vendetta",
"desc": "Hugo Weaving"
}
];
});
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<script src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="DataCtrl">
<table border="1">
<tr ng-repeat="data in dataInfo">
<td>
<a ng-repeat="link in data.prID.split(';')" href="http://myURL.com/getInfo/viewStatus?prInfo={{link}}" target="_blank"> {{link}}<span ng-if="$index+1 != data.prID.split(';').length">;</span></a>
</td>
</tr>
</table>
</div>
</body>
</html>
Demo here
Related
I'm working on the tutorial to display contact details on my page. The code doesn't display the first and last name. Please find the code below.
My index.html
<!DOCTYPE html>
<html data-ng-app="myContactApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="app.js"></script>
<title>My Contact Application</title>
</head>
<body>
<h1>Contact App</h1>
<div data-ng-controller="contactController as ctrl">
<div data-ng-repeat="con in ctrl.contactArr">
<span>{{con.name.first+ " "+con.name.last}}</span>
</div>
</div>
</body>
</html>
My app.js file
var app=angular.module("myContactApp",[]);
app.controller("contactController",contactCtrl);
function contactCtrl(){
this.contactArr = [
{
"gender": "male",
"name": {
"title": "mr",
"first": "romain",
"last": "hoogmoed"
},
"location": {
"street": "1861 jan pieterszoon coenstraat",
"city": "maasdriel",
"state": "zeeland",
"postcode": 69217
},
"email": "romain.hoogmoed#example.com",
"login": {
"username": "lazyduck408",
"password": "jokers",
"salt": "UGtRFz4N",
"md5": "6d83a8c084731ee73eb5f9398b923183",
"sha1": "cb21097d8c430f2716538e365447910d90476f6e",
"sha256": "5a9b09c86195b8d8b01ee219d7d9794e2abb6641a2351850c49c309f1fc204a0"
},
"dob": "1983-07-14 07:29:45",
"registered": "2010-09-24 02:10:42",
"phone": "(656)-976-4980",
"cell": "(065)-247-9303",
"id": {
"name": "BSN",
"value": "04242023"
},
"picture": {
"large": "https://randomuser.me/api/portraits/men/83.jpg",
"medium": "https://randomuser.me/api/portraits/med/men/83.jpg",
"thumbnail": "https://randomuser.me/api/portraits/thumb/men/83.jpg"
},
"nat": "NL"
}
]
}
My page is not showing the first and last name when I run through HTTP-server. Am I doing anything wrong?
Your code works fine. Kindly see whether app.js or angular dependency properly loaded or not.
https://jsfiddle.net/Prasanna15/m3q70umq/
you can check your code.
try to use https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular.min.js this one
Your code runs like a charm. There is no mistake in it. Please ensure that all ressources (app.js & https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js) are loaded. Open up the network tab in your browser debugger to check this. Also ensure you cleaned up your browser cache.
<!DOCTYPE html>
<html data-ng-app="myContactApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="app.js"></script>
<title>My Contact Application</title>
</head>
<body>
<h1>Contact App</h1>
<div data-ng-controller="contactController as ctrl">
<div data-ng-repeat="con in ctrl.contactArr">
<span>{{con.name.first+ " "+con.name.last}}</span>
</div>
</div>
</body>
</html>
--> demo fiddle
Below I am trying to make a datepicker element to an input field by clicking on a button. As all the datepickers have same class name, clicking on button is changing all the them to input field. But I want to change only that datapicker which is in the row of that button.
HTML
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
<link rel="stylesheet" href="custom.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
<div>
<div class="row">
<div class="input-field col s6 offset-s2">
<input id="contact" type="text" class="validate">
<label for="Contact">Enter contact name.</label>
</div>
<div class="md col s4">
<a class="bt waves-effect waves-light btn">Search</a>
</div>
</div>
<div class="table-margin">
<table id="mytable">
<thead>
<tr>
<th data-field="id">Contact Name</th>
<th data-field="phone">Phone</th>
<th data-field="Data"> Data</th>
<th data-field="Action"> Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/js/materialize.min.js"></script>
<script src="script.js"></script>
<script src="new.js"></script>
</body>
</html>
JS1
$(document).ready(function() {
var status = [
{
"id": 1,
"name": "sourabh",
"phone": "811880",
"email":"sourabhgrg713#gmail.com"
},
{
"id": 6,
"name": "sourabh",
"phone": "255888888",
"email": "Sourabhgrg713#gmail.com"
},
{
"id": 6,
"name": "sourabh",
"phone": "255888888",
"email": "Sourabhgrg713#gmail.com"
},
{
"id": 6,
"name": "sourabh",
"phone": "255888888",
"email": "Sourabhgrg713#gmail.com"
}];
var len = status.length;
var x= '<input type="date" class="dt datepicker">';
var y= '<button class="make waves-effect waves-light btn" type="button">Update</button>';
data = "";
if(len > 0){
for (var i = 0; i < len; i++){
data = data + "<tr><td>"+status[i].name+"</td><td>"+status[i].phone+"</td><td>"+x+"</td><td>"+y+"</td><tr>";
}
}
$("#mytable tbody").append(data)
});
Js2.
$(document).ready(function() {
$('.datepicker').pickadate({
selectMonths: true, // Creates a dropdown to control month
selectYears: 15 // Creates a dropdown of 15 years to control year
});
$('.make').click(function(){
var x = this.rowIndex;
console.log(x);
$('.dt').replaceWith($('<input type="text" value="Input box">'));
});});
Use $(this).closest("tr").find(".dt") instead of $(".dt") so it only selects the datepicker in the same row as the element you clicked on.
I am using ng-options for my select tag to have choices for the users. Everything works perfectly but after selecting an option for the first time the default blank value is gone. What if I want to revert back to the defaul blank value again? How can that be done? How can I retain that blank value?
Here is an example of my code:
<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-controller="myController">
<h1>Hello World!</h1>
<select ng-model="mySelection" name="" id="" ng-options="x.value as x.label for x in myOptions">
</select>
</body>
</html>
<script>
var app = angular.module('app', []);
app.controller('myController', function($scope){
$scope.myOptions = [{
"value": null,
"label": null,
},{
"value": "First",
"label": "First",
},{
"value": "Second",
"label": "Second",
},{
"value": "Third",
"label": "Third",
}]
});
</script>
Here is the plunker: http://plnkr.co/edit/5f17YxRfWFI4g40t3NEf?p=preview
use
<select ng-model="mySelection" name="" id="" ng-options="x.value as x.label for x in myOptions">
<option value=""></option>
</select>
Don't pollute your 'myOptions' with dummy null object, as APIs will not return you the same. you need to handle it on presentation layer, as shown above. while saving, if use selects empty, it will be saved as null (if handled properly)
also you can have something like this
<option value="">---select---</option>
Just add blank option to your options and select the blank by default like:
<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-controller="myController">
<h1>Hello World!</h1>
<select ng-model="mySelection" name="" id="" ng-options="x.value as x.label for x in myOptions">
</select>
</body>
</html>
<script>
var app = angular.module('app', []);
app.controller('myController', function($scope){
$scope.mySelection = '';
$scope.myOptions = [{
"value": "",
"label": "",
},{
"value": "First",
"label": "First",
},{
"value": "Second",
"label": "Second",
},{
"value": "Third",
"label": "Third",
}]
});
</script>
here we add the blank option
{
"value": "",
"label": "",
}
and select that empty option $scope.mySelection = '';
The problem that i am getting is that my ng-repeat / ng-bind won't show the data inside $scope.articles. while in the console i get the data im expecting.
I now made a code snippit so it's easier to discover the problem.
var App = angular.module('App', []);
App.controller('WebCtrl', function($scope, $http) {
$scope.start = [{
"id": 1,
"text": "test1"
}, {
"id": 2,
"text": "test2"
}, {
"id": 3,
"text": "test3"
}, {
"id": 4,
"text": "test4"
}];
$scope.articles = $scope.start;
$http.get('/')
.then(function() {
$scope.menu = function(id) {
$scope.articles = $scope.start[id];
console.log($scope.articles);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!doctype html>
<html ng-app="App">
<head>
<meta charset="utf-8">
<title>Todos $http</title>
<script src="app.js"></script>
</head>
<body ng-controller="WebCtrl">
<ul>
<li style="list-style: none">
<button ng-click="menu(0)">1</button>
<button ng-click="menu(1)">2</button>
<button ng-click="menu(2)">3</button>
<button ng-click="menu(3)">4</button>
</li>
</ul>
<ul>
<li style="list-style: none" ng-repeat="article in articles">
{{article.text}}
</li>
</ul>
</body>
</html>
Your code starts with an articles object pointing to an array. Inside menu, it gets replaced by an object. ng-repeat iterates over its keys.
I guess the main change would be:
$scope.articles = $scope.start.slice(id, id + 1);
var App = angular.module('App', []);
App.controller('WebCtrl', function($scope, $http) {
$scope.start = [{
"id": 1,
"text": "test1"
}, {
"id": 2,
"text": "test2"
}, {
"id": 3,
"text": "test3"
}, {
"id": 4,
"text": "test4"
}];
$scope.articles = $scope.start;
$scope.menu = function(id) {
$scope.articles = $scope.start.slice(id, id + 1);
console.log($scope.articles);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!doctype html>
<html ng-app="App">
<head>
<meta charset="utf-8">
<title>Todos $http</title>
<script src="app.js"></script>
</head>
<body ng-controller="WebCtrl">
<ul>
<li style="list-style: none">
<button ng-click="menu(0)">1</button>
<button ng-click="menu(1)">2</button>
<button ng-click="menu(2)">3</button>
<button ng-click="menu(3)">4</button>
</li>
</ul>
<ul>
<li style="list-style: none" ng-repeat="article in articles">
{{article.text}}
</li>
</ul>
</body>
</html>
I have a simple JavaScript object that looks like this:
$scope.obj = { "'Architect'": ["asdf","d","e","y"]};
I'd like to show the values of 'Architect' in a select box. However, the single quotes are throwing me off when trying to do the ng-repeat.
<select>
<option ng-repeat="row in obj['Architect']" value="{{row}}">{{row}}</option>
</select>
That does not populate the select box, it just shows an empty select box. I assume it is interpreting the single quotes as a string literal, but even if I add single quotes and escape them, it still doesn't work as expected. Am I missing something?
Here is a sample plunker:
escape the quotes How to properly escape quotes inside html attributes?
<option ng-repeat="row in obj["'Architect'"]" value="{{row}}">{{row}}</option>
http://plnkr.co/edit/6xUD3Zg0jxV05b41f2Gw?p=preview
why don't you use "ng-options" for select?
take a lock at this
AngularJs API: select
Here is the complete code for ng repeat with external json
HTML
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>datatable using jquery.datatable in angularjs</title>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container" ng-app="problemApp" data-ng-controller="validationCtrl">
<select>
<option ng-repeat="item in testdata" value="">{{item.name}}</option>
</select>
</div>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
index.js
var app=angular.module('problemApp', []);
app.controller('validationCtrl',function($scope,$http){
$http.get('http://localhost/Dtable_angular/ngrepeatdropdown/test.json').success(function (data) {
$scope.testdata = data;
console.log($scope.testdata)
})
$scope.dataTableOpt = {
//custom datatable options
// or load data through ajax call also
"aLengthMenu": [[10, 50, 100,-1], [10, 50, 100,'All']],
};
});
test.json
[{
"countryId": 1,
"name": "France - Mainland",
"desc": "some description"
},
{
"countryId": 2,
"name": "Gibraltar",
"desc": "some description"
},
{
"countryId": 3,
"name": "Malta",
"desc": "some description"
}
]