why does the following statement work but not the one after
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/bootstrap-theme.min.css" rel="stylesheet" />
</head>
<body ng-app>
<table ng-init='products = [{"name":"blah", "code":"ten12", "available":"yes","price":243}]'>
<thead>
<tr>
<td></td>
<td>Product</td>
<td>Code</td>
<td>Available</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="product in products">
<td>{{product.name}}</td>
<td>{{product.code}}</td>
<td>{{product.available}}</td>
<td>{{product.price}}</td>
</tr>
</tbody>
</table>
</body>
</html>
and this one does not work
<!DOCTYPE html>
<html >
<head>
<title></title>
<meta charset="utf-8" />
<script src="scripts/jquery-2.1.4.min.js"></script>
<script src="scripts/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js" type="text/javascript"></script>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/bootstrap-theme.min.css" rel="stylesheet" />
</head>
<body ng-app>
<table ng-init='products = [{"name":"blah", "code":"ten12", "available":"yes","price":243}]'>
<thead>
<tr>
<td></td>
<td>Product</td>
<td>Code</td>
<td>Available</td>
<td>Price</td>
</tr>
</thead>
<tbody>
<tr>
<td>{{products.name}}</td>
<td>{{products.code}}</td>
<td>{{products.available}}</td>
<td>{{products.price}}</td>
</tr>
</tbody>
</table>
</body>
</html>
the only difference i see in the above two statements is that second one is missing ng-repeat statement but products variable is initialised in both of them. so in second statement if i directly call products shouldn't it be called atleast one time?
In both of the examples, products is an array (in this case, with one item).
In the first one, you're iterating through the items in the array with ng-repeat, which works fine. In the second one, though, you are trying to display properties name, code, and so on of the array, not any of the items, and arrays do not have those properties, so nothing is displayed. (Conversely, for example, you would get a value back from products.length but not product.length, because arrays have a length property while the items don't.)
You could display the properties of the first item in the array by using
<td>{{products[0].name}}</td>
<td>{{products[0].code}}</td>
<td>{{products[0].available}}</td>
<td>{{products[0].price}}</td>
instead. But that'll do exactly that, only display the first one. You need to use ng-repeat as in the first example if you want to display the data for each of them dynamically.
Related
Hello I am very new to angularjs and need some help to update each row. Let's assume that User change any of the option from dropdown box or checkbox, i need to keep track of them and pass that data to backend whenever user click "Submit". How can i achieve that ?
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'Need to update Row that I have changed';
$scope.submitButton = function(){
alert("please help me !!!");
}
$scope.cities = ["Austin",
"Leander",
"RoundRock"];
$scope.data = [{check:'active',firstName:'James',lastName:'Austin',city:'Leander'},
{check:'inactive',firstName:'Niki',lastName:'Jones',city:'Austin'},
{check:'active',firstName:'Amy',lastName:'Parker',city:'RoundRock'}]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<table>
<thead>
<th>Active</th>
<th>First Name</th>
<th>Last Name</th>
<th> City</th>
</thead>
<tbody>
<tr ng-repeat="d in data">
<td><input type="checkbox" ng-checked="d.check=='active'"/>{{d.check}}</td>
<td>{{d.firstName}}</td>
<td>{{d.lastName}}</td>
<td><select ng-model="d.city" ng-change="showSelectValue(d.city)" ng-options="c for c in cities"></select></td>
</tr>
</tbody>
</table>
<button type="button" ng-click="submitButton()">Submit</button>
</body>
</html>
`I am very new to Angularjs and need help with updating the each row.
Whenever user change the value either checkbox or dropdown list, I need to keep track of them and pass that data to backend whenever user click save.
I'm using an API to make a table of all the data. The JSON url is connected (which I verified with a 200 Status). What am I doing wrong? Most importantly, if there is another way to accomplish what I'm trying to do, I'm open.
(function() {
var app = angular.module("RacingApp", []);
app.controller("DriversCtrl", function($scope, $http) {
$http.get("http://ergast.com/api/f1/2013/driverStandings.json?callback=JSON_CALLBACK").then(function(response) {
$scope.driver = response.MRData.StandingsTable.StandingsLists[0].DriverStandings;
});
});
})();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>F1 Racing API</title>
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="assets/css/main.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body ng-app="RacingApp">
<div class="container" ng-controller="DriversCtrl">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<table class="table table-striped table-bordered table-compressed">
<thead id="table-header">
<tr>
<th colspan="5">
<div class="text-left col-md-6">Drivers Championship Standings</div>
<div class="text-right col-md-6">
</div>
</th>
</tr>
</thead>
<thead>
<tr>
<th>Place</th>
<th>Nationality</th>
<th>Name</th>
<th>Sponsor</th>
<th>Points</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="info in information">
<th scope="row">{{$index + 1}}</th>
<td>{{info.Driver.nationality}}</td>
<td>{{info.Driver.givenName}} & {{info.Driver.familyName}}</td>
<td>{{info.Constructors[0].name}}</td>
<td>{{info.points}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://code.angularjs.org/1.5.7/angular.min.js"></script>
<script src="js/app.js" type="text/javascript"></script>
</body>
</html>
I found a resolution. For whatever reason, the package I received back from the server was MRData.data, which didn't show up in the actual JSON data. It works now!!
I want to use Angular smart-table in my html code.
My environment:
server-side - Apache vs java
client side - html with angular
I downloaded the smart-table repository but I have difficulty to install the module manually and there is no instructions or tutorial for this on the web
What i tried so far is:
In my html file i am pointing to smart-table.js and smart-table.min.js
<script src="../app/assets/js/smart-table.js"></script>
<script src="../app/assets/js/smart-table.min.js"></script>
2.in my app I am referencing 'smart-table':
var app = angular.module('FarmManagment', ['smart-table']);
but it's not working the smart-table futures are not recognized.
please help to configure this correctly!!!
this is my code in general:
<html>
<head>
<title>get farms angularjs tester</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="../js/style.css">
<link rel="stylesheet" href="../js/normalize.css">
<link rel="stylesheet" href="../app/assets/css/search box">
<link rel="stylesheet" href="../js/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="../app/assets/js/smart-table.js"></script>
<script src="../app/assets/js/smart-table.min.js"></script>
</head>
<body ng-app="FarmManagment" ng-controller="mainCtrl">
<!-- Data table -->
<table id="auditTable" class="table table-hover" st-table="displayedCollection" st-safe-src="rowCollection" cellspacing="0" width="100%">
<thead>
<tr>
<th st-sort="FarmName">Farm Name</th>
...
...
</tr>
</thead>
<tbody id ="tbody">
<tr ng-repeat="row in rowCollection">
<td ng-bind="row.FarmName"></td>
...
...
</tr>
</tbody>
</table>
<script>
var app = angular.module('FarmManagment', ['smart-table']);
app.controller('mainCtrl', function ($scope,$http) {
$http.get('<path>').then(function(response) {
$scope.rowCollection = response.data.farms;
});
});
</script>
</body>
Thanks
Dima
var myApp = angular.module('myApp',[]);
myApp.controller('myCtrl',['$scope',function($scope){
$scope.tableData = ['hello','blue','angular'];
//set ture ok but only first time
//设置 true 可以 但是 只有第一次可以
//$scope.selectClass = true;
$scope.reset = function(){
console.log('reset');
$scope.selectClass = false;
}
}]).directive('myTd',function(){
return {
restrict : 'A',
link : function(scope,elem){
$(elem).on('click',function(){
if($(this).hasClass('selected')){
$(this).removeClass('selected')
}else{
$(this).addClass('selected');
}
})
}
}
});
.selected {background: #139029;}
<link href="//cdn.bootcss.com/bootstrap/4.0.0-alpha.3/css/bootstrap.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="styles/bootstrap.min.css">
<style>
.selected {background: #139029;}
</style>
</head>
<body ng-controller="myCtrl">
<div class="container-fluid">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>item1</th>
<th>item2</th>
<th>item3</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in [1,2,3]">
<td ng-class="{'selected':selectClass}" ng-repeat="item in tableData" my-td >{{item}}</td>
</tr>
</tbody>
</table>
<button class="btn btn-danger btn-block" ng-click="reset();">重置表格</button>
</div>
</body>
<script src="lib/angular.1.5.5.min.js"></script>
<script src="lib/jquery.2.2.2.min.js"></script>
<script src="src/resetTable.js"></script>
</html>
i click button reset class not work, why? who can tell me. thanks very much!!
You don't need that directive (and you don't need to manipulate the DOM yorself). ng-class is itself a built-in directive that does just that.
Just delete your myTd directive and change your element to this:
<td ng-class="{'selected':selectClass}" ng-repeat="item in tableData" ng-click="selectClass = !selectClass" >{{item}}</td>
Actually what you want to do to achieve your requirement by preserving the directive is to remove the class selected from your table rows
To do that modify the reset function as follows
$scope.reset = function(){
$('.selected').removeClass('selected');
}
This function selects all the elements with class name selected and will remove the class from those elements
I have a table with dynamic rows, when I press "add row" main row is copied and added to array. But when it copied - id copied too, and I don't need to change this ID.
I copy main field like this:
$scope.addRow = function() {
var copy = angular.copy($scope.item[0]);
$scope.item.push(copy)
}
validate is working like this :
ng-class='{"is-invalid": tableForm[field.id].$invalid}'
I was thinking to add second ng-form for <tr>, with dynamic name like : ng-form="{{row + $index}}", but in webstorm it highlight like error, so I guess it must be static name.. Now when I have invalid field - all column will be red (error). How can I without change ID's validate fields separately?
My plnkr example
use $index in name field
change html file in your plunker as below
<!DOCTYPE html>
<html ng-app='App'>
<head>
<script data-require="angularjs#1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller='Ctrl'>
<h1>table</h1>
<table>
<thead>
<tr>
<th ng-repeat='item in item[0].field'>{{item.name}}</th>
</tr>
</thead>
<tbody ng-form='tableForm'>
<tr ng-repeat='row in item'>
<td>{{$index}}</td>
<td ng-repeat='field in row.field'>
<input type="text"
ng-model='field.value'
name='{{$index}}'
required
ng-class='{"is-invalid": tableForm[$parent+$index].$invalid}'>
</td>
<td ng-if='$index !== 0'
style='color:red;cursor:pointer'
ng-click='removeRow($index)'>X</td>
</tr>
</tbody>
</table>
<button ng-click='addRow()'>add row</button>
</body>
</html>