how can I get child elements in angularjs

how can I get child elements in angularjs - javascript

I'm making a multi-select "drop-down" and I want to disable the category and style it differently in my "drop-down". so I got the select element and I want to make those children that are category disable. how can I get the children to do this.
so far I've done this:
"use strict";
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope, $http) {
$scope.datas = [{
"item": "South Korea",
"category": "Asia",
"flag": false
}, {
"item": "England",
"category": "Europe",
"flag": false
}, {
"item": "Japan",
"category": "Asia",
"flag": false
}, {
"item": "Denmark",
"category": "Europe",
"flag": false
}, {
"item": "North Korea",
"category": "Asia",
"flag": false
}, {
"item": "Geramany",
"category": "Europe",
"flag": false
}, {
"item": "China",
"category": "Asia",
"flag": false
}, {
"item": "Spain",
"category": "Europe",
"flag": false
}, {
"item": "India",
"category": "Asia",
"flag": false
}, {
"item": "Italy",
"category": "Europe",
"flag": false
}, {
"item": "Tailand",
"category": "Asia",
"flag": false
}, {
"item": "Portugal",
"category": "Europe",
"flag": false
}];
$scope.catCountainr = [];
$scope.categorizedData = [];
$scope.indexContainer = [];
for (var i = 0; i < $scope.datas.length; i++) {
if ($scope.catCountainr.indexOf($scope.datas[i].category) == -1) {
$scope.catCountainr.push($scope.datas[i].category);
}
}
for (var i = 0; i < $scope.catCountainr.length; i++) {
$scope.categorizedData.push($scope.catCountainr[i]);
$scope.indexContainer.push($scope.categorizedData.indexOf($scope.datas[i].category));
for (var j = 0; j < $scope.datas.length; j++) {
if ($scope.datas[j].category == $scope.catCountainr[i]) {
$scope.categorizedData.push($scope.datas[j].item);
}
}
}
var select = angular.element(document.getElementById("select"));
});
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
</head>
<body ng-controller="myCtrl">
<div class="container">
<form action="" class="">
<div id="widgetContainer">
<!--<input type="text" ng-click="openSelect()" class="input-control">
<div id="selectContainer" ng-show="selectEnable">
<div>{{selectedItems.toString()}}</div>
<input type="text" id="searchField" ng-model="searchField" ng-change="filter()">
<div id="listContainer">
<ul id="innerContainer">
<li ng-repeat="data in data2Show | orderBy: data.item" ng-model="data2show">
<h4>{{data.category}}</h4>
<input type="checkbox" ng-change="itemChecked(data)" name="select" ng-model="data.flag" ng-checked="isChecked(data)"> {{data.item}}
</li>
<div ng-show="dataLoading" ng-model="dataLoading">loading...</div>
<li id="loadMore" ng-click="loadMore()">
load more
</li>
</ul>
</div>
</div>-->
<ul id="select">
<li ng-repeat="key in categorizedData">{{ key }}</li>
</ul>
</div>
</form>
</div>
</body>
</html>
When I use select.children() it's not working
Is there any other way to get those children?
thank you in advance

Do it like this
for (var i = 0; i < $scope.catCountainr.length; i++) {
$scope.categorizedData.push({
item: $scope.catCountainr[i],
isDisabled: true
});
$scope.indexContainer.push($scope.categorizedData.indexOf($scope.datas[i].category));
for (var j = 0; j < $scope.datas.length; j++) {
if ($scope.datas[j].category == $scope.catCountainr[i]) {
$scope.categorizedData.push({
item: $scope.datas[j].item,
isDisabled: false
});
}
}
}
<ul id="select">
<li ng-repeat="data in categorizedData" ng-class="{'diffColor': data.isDisabled}">{{ data.item }}</li>
</ul>
.diffColor {
background-color: wheat;
pointer-events: none;
user-select: none;
}
"use strict";
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope, $http) {
$scope.datas = [{
"item": "South Korea",
"category": "Asia",
"flag": false
}, {
"item": "England",
"category": "Europe",
"flag": false
}, {
"item": "Japan",
"category": "Asia",
"flag": false
}, {
"item": "Denmark",
"category": "Europe",
"flag": false
}, {
"item": "North Korea",
"category": "Asia",
"flag": false
}, {
"item": "Geramany",
"category": "Europe",
"flag": false
}, {
"item": "China",
"category": "Asia",
"flag": false
}, {
"item": "Spain",
"category": "Europe",
"flag": false
}, {
"item": "India",
"category": "Asia",
"flag": false
}, {
"item": "Italy",
"category": "Europe",
"flag": false
}, {
"item": "Tailand",
"category": "Asia",
"flag": false
}, {
"item": "Portugal",
"category": "Europe",
"flag": false
}];
$scope.catCountainr = [];
$scope.categorizedData = [];
$scope.indexContainer = [];
for (var i = 0; i < $scope.datas.length; i++) {
if ($scope.catCountainr.indexOf($scope.datas[i].category) == -1) {
$scope.catCountainr.push($scope.datas[i].category);
}
}
for (var i = 0; i < $scope.catCountainr.length; i++) {
$scope.categorizedData.push({
item: $scope.catCountainr[i],
isDisabled: true
});
$scope.indexContainer.push($scope.categorizedData.indexOf($scope.datas[i].category));
for (var j = 0; j < $scope.datas.length; j++) {
if ($scope.datas[j].category == $scope.catCountainr[i]) {
$scope.categorizedData.push({
item: $scope.datas[j].item,
isDisabled: false
});
}
}
}
});
.diffColor {
background-color: wheat;
pointer-events: none;
user-select: none;
}
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
</head>
<body ng-controller="myCtrl">
<div class="container">
<form action="" class="">
<div id="widgetContainer">
<!--<input type="text" ng-click="openSelect()" class="input-control">
<div id="selectContainer" ng-show="selectEnable">
<div>{{selectedItems.toString()}}</div>
<input type="text" id="searchField" ng-model="searchField" ng-change="filter()">
<div id="listContainer">
<ul id="innerContainer">
<li ng-repeat="data in data2Show | orderBy: data.item" ng-model="data2show">
<h4>{{data.category}}</h4>
<input type="checkbox" ng-change="itemChecked(data)" name="select" ng-model="data.flag" ng-checked="isChecked(data)"> {{data.item}}
</li>
<div ng-show="dataLoading" ng-model="dataLoading">loading...</div>
<li id="loadMore" ng-click="loadMore()">
load more
</li>
</ul>
</div>
</div>-->
<ul id="select">
<li ng-repeat="data in categorizedData" ng-class="{'diffColor': data.isDisabled}">{{ data.item }}</li>
</ul>
</div>
</form>
</div>
</body>
</html>
2nd Answer
A slightly different approach then your js, but it seemed better to me so I have added. Please look into updated JS and HTML code as well.
"use strict";
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope, $http) {
$scope.datas = [{
"item": "South Korea",
"category": "Asia",
"flag": false
}, {
"item": "England",
"category": "Europe",
"flag": false
}, {
"item": "Japan",
"category": "Asia",
"flag": false
}, {
"item": "Denmark",
"category": "Europe",
"flag": false
}, {
"item": "North Korea",
"category": "Asia",
"flag": false
}, {
"item": "Geramany",
"category": "Europe",
"flag": false
}, {
"item": "China",
"category": "Asia",
"flag": false
}, {
"item": "Spain",
"category": "Europe",
"flag": false
}, {
"item": "India",
"category": "Asia",
"flag": false
}, {
"item": "Italy",
"category": "Europe",
"flag": false
}, {
"item": "Tailand",
"category": "Asia",
"flag": false
}, {
"item": "Portugal",
"category": "Europe",
"flag": false
}];
$scope.catCountainr = [];
$scope.categorizedData = [];
$scope.indexContainer = [];
for (var i = 0; i < $scope.datas.length; i++) {
if ($scope.catCountainr.indexOf($scope.datas[i].category) == -1) {
$scope.catCountainr.push($scope.datas[i].category);
}
}
for (var i = 0; i < $scope.catCountainr.length; i++) {
$scope.categorizedData.push({
item: $scope.catCountainr[i],
isDisabled: true,
items: []
});
for (var j = 0; j < $scope.datas.length; j++) {
if ($scope.datas[j].category == $scope.catCountainr[i]) {
$scope.categorizedData[i].items.push({
item: $scope.datas[j].item
});
}
}
}
});
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"></script>
</head>
<body ng-controller="myCtrl">
<div class="container">
<form action="" class="">
<div id="widgetContainer">
<!--<input type="text" ng-click="openSelect()" class="input-control">
<div id="selectContainer" ng-show="selectEnable">
<div>{{selectedItems.toString()}}</div>
<input type="text" id="searchField" ng-model="searchField" ng-change="filter()">
<div id="listContainer">
<ul id="innerContainer">
<li ng-repeat="data in data2Show | orderBy: data.item" ng-model="data2show">
<h4>{{data.category}}</h4>
<input type="checkbox" ng-change="itemChecked(data)" name="select" ng-model="data.flag" ng-checked="isChecked(data)"> {{data.item}}
</li>
<div ng-show="dataLoading" ng-model="dataLoading">loading...</div>
<li id="loadMore" ng-click="loadMore()">
load more
</li>
</ul>
</div>
</div>-->
<ul id="select">
<li ng-repeat="data in categorizedData" class="isDisabled">{{data.item }}
<ul ng-if="data.items && data.items.length > 0">
<li ng-repeat="itemVar in data.items" class="isDisabled">{{itemVar.item }}</li>
</ul>
</li>
</ul>
</div>
</form>
</div>
</body>
</html>

Related

How to make the radio button dynamic in angular

here's the code:
list.component.html
<div class="sample" style="
margin: 0;
padding: 0;
overflow-y: scroll;
max-height: 100%;
">
<nz-form-item *ngFor="let remark of tasks">
<div nz-row nzType="flex" nzAlign="middle">
<div nz-col nzSpan="14">
{{ remark.description }}
</div>
<div nz-col nzSpan="10">
<nz-form-control>
<nz-radio-group formControlName="radiostatus" [(ngModel)]="radioValue"
(ngModelChange)="onChangeStatus($event)">
<label nz-radio nzValue="passed">Passed</label>
<label nz-radio nzValue="failed">Failed</label>
</nz-radio-group>
</nz-form-control>
</div>
</div>
<div nz-row *ngIf="radioValue === 'failed'">
<div nz-col nzSpan="24">
<nz-form-control>
<textarea nz-input placeholder="Remarks" class="remarks-textarea" type="text" name="otherRemark"
formControlName="otherRemark" [(ngModel)]="otherRemark"
[nzAutosize]="{ minRows: 1, maxRows: 2 }"></textarea>
</nz-form-control>
</div>
</div>
</nz-form-item>
</div>
list.component.ts
tasks = [
{
"id": "ESOSA6aCrOER",
"createdBy": "admin",
"timeCreated": "2019-09-05 11:24:07",
"updatedBy": "admin",
"timeUpdated": "2019-09-05 11:24:07",
"name": "Sample1",
"description": "Desc1",
"status": "ACTIVE",
"type": "PM"
},
{
"id": "1og6aSsrlG3nT",
"createdBy": "admin",
"timeCreated": "2019-09-05 11:31:18",
"updatedBy": "admin",
"timeUpdated": "2019-09-05 11:31:18",
"name": "Sample2",
"description": "DESC2",
"status": "ACTIVE",
"type": "PM"
},
{
"id": "tbwndVAkYtql",
"createdBy": "admin",
"timeCreated": "2019-09-05 11:33:11",
"updatedBy": "admin",
"timeUpdated": "2019-09-05 11:33:11",
"name": "SAMPLE4",
"description": "DESC4",
"status": "ACTIVE",
"type": "PM"
},
{
"id": "1cyNFwhR4cI9n",
"createdBy": "admin",
"timeCreated": "2019-09-05 11:56:12",
"updatedBy": "admin",
"timeUpdated": "2019-09-05 11:56:12",
"name": "SAMPLE5",
"description": "DESC5",
"status": "ACTIVE",
"type": "PM"
},
{
"id": "1qJWWRwz2Q2fD",
"createdBy": "admin",
"timeCreated": "2019-11-28 15:51:02",
"updatedBy": "admin",
"timeUpdated": "2019-11-28 15:51:02",
"name": "Task 0001",
"description": "Task 0001 Description",
"status": "ACTIVE",
"type": "PM"
},
]
What I want is when selecting radio button. it should not affect the other radio button.
the problem is when I select the first item/radio button.
also the textarea, when I click the failed all textarea from the item will display, it shouldn't display affect the other.
thanks in advance

I think you forgot to group the radio buttons in different groups for each remark of task.
I can see you have created radio buttons with group name radiostatus but for all your remarks group name remains same which shouldn't be the case.
What you can do is add index to the for loop and then dynamically give different
names to different group according to remarks.
<nz-form-item *ngFor="let remark of tasks; let i = index">
now while giving name to group name instead of giving hard coded value produce different name by using index.
[formControlName]="'radiostatus'+ i"

How to keep matched row on top of other rows in " smart-table " irrespective of Pagination?

I'm using Smart table I want to keep matched rows on top of other rows in table using angularjs(1), in my case i have been matching string from table column, on the basis of matched string I'm changing row background color, and showing them on top of other row but Problem is those matched row not working as expected when I use smart table pagination.
I want display all matched rows to top of other rows irrespective pagination and all using Smart-Table
var myApp = angular.module('myApp', [])
.controller('employeeController', function($scope) {
var employees = [{
"Name": "Alfreds Futterkiste",
"City": "Berlin",
"Country": "Germany"
}, {
"Name": "Berglunds snabbköp",
"City": "Luleå",
"Country": "Sweden"
}, {
"Name": "Blauer See Delikatessen",
"City": "Mannheim",
"Country": "Germany"
}, {
"Name": "Blondel père et fils",
"City": "Strasbourg",
"Country": "France"
}, {
"Name": "Bólido Comidas preparadas",
"City": "Madrid",
"Country": "Spain"
}, {
"Name": "Bon app'",
"City": "Marseille",
"Country": "France"
}, {
"Name": "Bottom-Dollar Marketse",
"City": "Tsawassen",
"Country": "Canada"
}, {
"Name": "Cactus Comidas para llevar",
"City": "Buenos Aires",
"Country": "Argentina"
}, {
"Name": "Centro comercial Moctezuma",
"City": "México D.F.",
"Country": "Mexico"
}, {
"Name": "Chop-suey Chinese",
"City": "Bern",
"Country": "Switzerland"
}, {
"Name": "Comércio Mineiro",
"City": "São Paulo",
"Country": "Brazil"
}, {
"Name": "Bon app'",
"City": "Marseille",
"Country": "France"
}, {
"Name": "Bottom-Dollar Marketse",
"City": "Tsawassen",
"Country": "Canada"
}, {
"Name": "Cactus Comidas para llevar",
"City": "Buenos Aires",
"Country": "Argentina"
}, {
"Name": "Bon app'",
"City": "Marseille",
"Country": "France"
}, {
"Name": "Bottom-Dollar Marketse",
"City": "Tsawassen",
"Country": "Canada"
}, {
"Name": "Cactus Comidas para llevar",
"City": "Buenos Aires",
"Country": "Argentina"
}, {
"Name": "Bon app'",
"City": "Marseille",
"Country": "France"
}, {
"Name": "Bottom-Dollar Marketse",
"City": "Tsawassen",
"Country": "Canada"
}, {
"Name": "Cactus Comidas para llevar",
"City": "Buenos Aires",
"Country": "Argentina"
}];
$scope.employee = employees;
$scope.displayedCollection = [].concat($scope.employee);
$scope.itemsByPage = 10;
var findme = "France";
$scope.sort = (emp) => {
emp.matched = emp.Country.indexOf(findme) > -1;
return !emp.matched;
}
})
.matched {
background-color: #FFCCCB;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-smart-table/2.1.11/smart-table.min.js"></script>
<body ng-app="myApp">
<div ng-controller="employeeController">
<div class="container" style="margin-top:40px;">
<div class="row">
{{error}}
<div class="col-md-6">
<table st-table="employees" st-safe-src="displayedCollection" class="table table-bordered table-condensed">
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="emp in employee | orderBy: [sort, 'Name']" ng-class="{'matched': emp.matched }" ng-style="set_color(emp)">
<td>{{emp.Name}}</td>
<td>{{emp.City}}</td>
<td>{{emp.Country}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3" class="text-center">
<div st-pagination="" st-items-by-page="itemsByPage" st-displayed-pages="7"></div>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</div>
</body>

angularJS how to get index value on every row in table using ui-bootstrap pagination?

I'm using ui-bootstrap pagination, I use $index value to add a comment on every row it is working fine but on 2nd page and 3rd and so on $index value starts from 0 again. how to read index value on 2nd 3rd ... pages,
why it is taking from 0th index again in page 2 and so on. i'm passing index value in in textarea as well.
I have give code below.
var myApp = angular.module('myApp', ['ui.bootstrap'])
.controller('employeeController', function ($scope) {
var employees = [{
"Name": "Alfreds Futterkiste",
"City": "Berlin",
"Country": "Germany"
}, {
"Name": "Berglunds snabbköp",
"City": "Luleå",
"Country": "Sweden"
}, {
"Name": "Blauer See Delikatessen",
"City": "Mannheim",
"Country": "Germany"
}, {
"Name": "Blondel père et fils",
"City": "Strasbourg",
"Country": "France"
}, {
"Name": "Bólido Comidas preparadas",
"City": "Madrid",
"Country": "Spain"
}, {
"Name": "Bon app'",
"City": "Marseille",
"Country": "France"
}, {
"Name": "Bottom-Dollar Marketse",
"City": "Tsawassen",
"Country": "Canada"
}, {
"Name": "Cactus Comidas para llevar",
"City": "Buenos Aires",
"Country": "Argentina"
}, {
"Name": "Centro comercial Moctezuma",
"City": "México D.F.",
"Country": "Mexico"
}, {
"Name": "Chop-suey Chinese",
"City": "Bern",
"Country": "Switzerland"
}, {
"Name": "Comércio Mineiro",
"City": "São Paulo",
"Country": "Brazil"
}];
$scope.employees=employees;
$scope.showHideAddNotes = function (vendorsId, $index) {
$scope.comments = vendorsId;
angular.forEach($scope.employees, function (vendr) {
if (vendr.VendID == $scope.comments) {
$scope.showComment = true;
}
})
}
$scope.pageSize = 10;
$scope.currentPage = 1;
$scope.itemsPerPage = $scope.pageSize;
$scope.maxSize = 5; //Number of pager buttons to show
$scope.totalItems = $scope.employees.length;
$scope.setPage = function (pageNo) {
$scope.currentPage = pageNo;
};
$scope.pageChanged = function () {
console.log('Page changed to: ' + $scope.currentPage);
};
$scope.setItemsPerPage = function (num) {
$scope.itemsPerPage = num;
$scope.currentPage = 1; //reset to first page
}
$scope.showHideAddNotes = function (index) {
alert(index);
$scope.employees[index].showComment = !$scope.employees[index].showComment;
}
$scope.addNote = function (vendkey, index) {
var notes = APService.SaveVendorComment($('#txtVendorNote' + index).val(), vendkey).responseJSON;
$scope.employees[index].showComment = !$scope.employees[index].showComment;
}
})
.textarea-container {
position: relative;
}
.textarea-container textarea {
width: 100%;
height: 100%;
box-sizing: border-box;
}
<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="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<body ng-app="myApp">
<div ng-controller="employeeController">
<div class="container" style="margin-top:40px;">
<div class="row">
<div style="text-align: center">
<ul uib-pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()" items-per-page="itemsPerPage" direction-links="true" max-size="maxSize" class="pagination" boundary-links="true" rotate="false" num-pages="numPages"></ul>
</div>
<div class="col-md-12">
<table class="table table-bordered table-condensed">
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody >
<tr ng-repeat="emp in employees.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage)) ">
<td>{{emp.Name}}<br>
<div>
<a href="#" ng-click="showHideAddNotes($index)">
<img src="http://icongal.com/gallery/image/43850/notes_add.png" />
</a>
</div>
<div class="textarea-container" ng-model="commentsArea" ng-show="emp.showComment">
<div style="margin-bottom:5px;">
<textarea id="txtVendorNote{{$index}}" ng-modal="inputvendor" name="foo" placeholder="Add comments here..."></textarea>
</div>
<button class="btn btn-danger btn-sm" style="padding:2px 10px 2px 10px" ng-click="addNote(vendor.VendKey,$index)">Save</button>
</div>
</td>
<td>{{emp.City}}</td>
<td>{{emp.Country}}</td>
</tr>
</tbody>
</table>
</div>
<div style="text-align: center">
<ul uib-pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()" items-per-page="itemsPerPage" direction-links="true" max-size="maxSize" class="pagination" boundary-links="true" rotate="false" num-pages="numPages"></ul>
</div>
</div>
</div>
</div>
</body>

The $index is actually the index of visible elements. You can get the real index like this.
index += ($scope.currentPage - 1) * $scope.itemsPerPage;
Working Snippet:
var myApp = angular.module('myApp', ['ui.bootstrap'])
.controller('employeeController', function($scope) {
var employees = [{
"Name": "Alfreds Futterkiste",
"City": "Berlin",
"Country": "Germany"
}, {
"Name": "Berglunds snabbköp",
"City": "Luleå",
"Country": "Sweden"
}, {
"Name": "Blauer See Delikatessen",
"City": "Mannheim",
"Country": "Germany"
}, {
"Name": "Blondel père et fils",
"City": "Strasbourg",
"Country": "France"
}, {
"Name": "Bólido Comidas preparadas",
"City": "Madrid",
"Country": "Spain"
}, {
"Name": "Bon app'",
"City": "Marseille",
"Country": "France"
}, {
"Name": "Bottom-Dollar Marketse",
"City": "Tsawassen",
"Country": "Canada"
}, {
"Name": "Cactus Comidas para llevar",
"City": "Buenos Aires",
"Country": "Argentina"
}, {
"Name": "Centro comercial Moctezuma",
"City": "México D.F.",
"Country": "Mexico"
}, {
"Name": "Chop-suey Chinese",
"City": "Bern",
"Country": "Switzerland"
}, {
"Name": "Comércio Mineiro",
"City": "São Paulo",
"Country": "Brazil"
}];
$scope.employees = employees;
$scope.showHideAddNotes = function(vendorsId, $index) {
$scope.comments = vendorsId;
angular.forEach($scope.employees, function(vendr) {
if (vendr.VendID == $scope.comments) {
$scope.showComment = true;
}
})
}
$scope.pageSize = 10;
$scope.currentPage = 1;
$scope.itemsPerPage = $scope.pageSize;
$scope.maxSize = 5; //Number of pager buttons to show
$scope.totalItems = $scope.employees.length;
$scope.setPage = function(pageNo) {
$scope.currentPage = pageNo;
};
$scope.pageChanged = function() {
console.log('Page changed to: ' + $scope.currentPage);
};
$scope.setItemsPerPage = function(num) {
$scope.itemsPerPage = num;
$scope.currentPage = 1; //reset to first page
}
$scope.showHideAddNotes = function(index) {
index += ($scope.currentPage - 1) * $scope.itemsPerPage;
alert(index);
$scope.employees[index].showComment = !$scope.employees[index].showComment;
}
$scope.addNote = function(vendkey, index) {
var notes = APService.SaveVendorComment($('#txtVendorNote' + index).val(), vendkey).responseJSON;
$scope.employees[index].showComment = !$scope.employees[index].showComment;
}
})
.textarea-container {
position: relative;
}
.textarea-container textarea {
width: 100%;
height: 100%;
box-sizing: border-box;
}
<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="example.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<body ng-app="myApp">
<div ng-controller="employeeController">
<div class="container" style="margin-top:40px;">
<div class="row">
<div style="text-align: center">
<ul uib-pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()" items-per-page="itemsPerPage" direction-links="true" max-size="maxSize" class="pagination" boundary-links="true" rotate="false" num-pages="numPages"></ul>
</div>
<div class="col-md-12">
<table class="table table-bordered table-condensed">
<thead>
<tr>
<th>Name</th>
<th>City</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="emp in employees.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage)) ">
<td>{{emp.Name}}<br>
<div>
<a href="#" ng-click="showHideAddNotes($index)">
<img src="http://icongal.com/gallery/image/43850/notes_add.png" />
</a>
</div>
<div class="textarea-container" ng-model="commentsArea" ng-show="emp.showComment">
<div style="margin-bottom:5px;">
<textarea id="txtVendorNote{{$index}}" ng-modal="inputvendor" name="foo" placeholder="Add comments here..."></textarea>
</div>
<button class="btn btn-danger btn-sm" style="padding:2px 10px 2px 10px" ng-click="addNote(vendor.VendKey,$index)">Save</button>
</div>
</td>
<td>{{emp.City}}</td>
<td>{{emp.Country}}</td>
</tr>
</tbody>
</table>
</div>
<div style="text-align: center">
<ul uib-pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()" items-per-page="itemsPerPage" direction-links="true" max-size="maxSize" class="pagination" boundary-links="true" rotate="false" num-pages="numPages"></ul>
</div>
</div>
</div>
</div>
</body>

var app = angular.module("myApp", ["ui.bootstrap"]);
app.controller("MainCtrl", function($scope) {
var allData =
[your data goes here];
$scope.totalItems = allData.length;
$scope.currentPage = 1;
$scope.itemsPerPage = 5;
$scope.$watch("currentPage", function() {
setPagingData($scope.currentPage);
});
function setPagingData(page) {
var pagedData = allData.slice(
(page - 1) * $scope.itemsPerPage,
page * $scope.itemsPerPage
);
$scope.aCandidates = pagedData;
}
});
<link data-require="bootstrap-css#*" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" />
<script>document.write('<base href="' + document.location + '" />');</script>
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
<script data-require="ui-bootstrap#*" data-semver="1.3.2" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-1.3.2.js"></script>
<div ng-app="myApp">
<div ng-controller="MainCtrl">
<table id="mytable" class="table table-striped">
<thead>
<tr class="table-head">
<th>Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in aCandidates">
<th>
<div>{{person}}</div>
</th>
</tr>
</tbody>
</table>
<uib-pagination total-items="totalItems" ng-model="currentPage" items-per-page="itemsPerPage"></uib-pagination>
</div>
</div>

angularJs ng -Repeat over an array of json object

This is the format of json which I need to parse:
[{
"perAddress": {
"city": "Delhi",
"Street": "saket",
"pin": "101011"
},
"flag": false
}, {
"perAddress": {
"city": "Delhi",
"Street": "malvya",
"pin": "101011"
},
"flag": true,
"alterAddress": {
"city": "bangalore",
"street": "velondore",
"pin": "560103"
}
}];
If the flag is false then the corresponding row will not be
highlighted and only perAddress will be populated .
If the flag is true then the corresponding row will be highlighted with
containing perAddress and on click on the row the alterAddress need
to populated. How to iterate through the json?

I can tell you in 2 ways. No need of using flag too.
.highlight {
background-color: gray;
}
Using flag solution follows:
<div>
<div ng-repeat="address in addresses" ng-class="{'highlight' : address.flag}">
<a ng-if="!showAlterAddress" ng-click="showAlterAddress = !showAlterAddress">{{address.perAddress}}</a>
<span ng-if="showAlterAddress">{{address.alterAddress}}</span>
</div>
</div>
Without using flag solution follows:
<div>
<div ng-repeat="address in addresses" ng-class="{'highlight' : address.alterAddress}">
<a ng-if="!showAlterAddress" ng-click="showAlterAddress = !showAlterAddress">{{address.perAddress}}</a>
<span ng-if="showAlterAddress">{{address.alterAddress}}</span>
</div>
</div>

Try this
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.data = [{
"perAddress": {
"city": "Delhi",
"Street": "saket",
"pin": "101011"
},
"flag": false
}, {
"perAddress": {
"city": "Delhi",
"Street": "malvya",
"pin": "101011"
},
"flag": true,
"alterAddress": {
"city": "bangalore",
"street": "velondore",
"pin": "560103"
}
}];
});
.Highlight {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="d in data" ng-init="" ng-click="d.flag = !d.flag" ng-class="{'Highlight' : d.alterAddress}">
<li>{{d.perAddress}}
<div ng-if="d.alterAddress">
<div ng-if="!d.flag">{{d.alterAddress}}</div>
</div>
</li>
</div>
</div>

Create a css class "Highlight" and use this code -
<ul>
<li ng-repeat="i in jsonArray" ng-class="{'Highlight' : i.flag}">
<span>{{i.perAddress.city}} | {{i.perAddress.Street}} | {{i.perAddress.pin}}</span>
</li>
</ul>

Filters not working - Angularjs

I have been studying some of the videos for angularjs. While trying to apply filter to a list of bookmark category my main content simply doesn't loads. I have not implemented view as of now. And I would like my code to be without views for a moment.
The filter line is problematic as when I remove the curly braces around. The bookmark lists does shows up but the filtering still not works !
Please let me know what is the correction which needs to be done ?
Here is my code for INDEX.HTML
<!doctype html>
<html ng-app="Eggly">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Eggly</title>
<link rel="stylesheet" href="assets/css/normalize.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/eggly.css">
<link rel="stylesheet" href="assets/css/animations.css">
</head>
<body ng-controller='MainCtrl'>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<img class="logo" src="assets/img/eggly-logo.png">
<ul class="nav nav-sidebar">
<li ng-repeat="category in categories">
{{category.name}}
</li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<div ng-repeat="bookmark in bookmarks | filter:{category:currentCategory.name}">
<button type="button" class="close">×</button>
<button type="button" class="btn btn-link"><span class="glyphicon glyphicon-pencil"></span></button>
{{bookmark.title}}
</div>
<hr/>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script type="text/javascript" src="app/eggly-app.start.js"></script>
</body>
JS FILE
angular.module('Eggly', [
])
.controller('MainCtrl', function($scope){
$scope.categories = [
{"id": 0, "name": "Development"},
{"id": 1, "name": "Design"},
{"id": 2, "name": "Exercise"},
{"id": 3, "name": "Humor"}
];
$scope.bookmarks= [
{"id":0, "title": "AngularJS", "url": "http://angularjs.org", "category": "Development" },
{"id":1, "title": "Egghead.io", "url": "http://angularjs.org", "category": "Development" },
{"id":2, "title": "A List Apart", "url": "http://alistapart.com/", "category": "Design" },
{"id":3, "title": "One Page Love", "url": "http://onepagelove.com/", "category": "Design" },
{"id":4, "title": "MobilityWOD", "url": "http://www.mobilitywod.com/", "category": "Exercise" },
{"id":5, "title": "Robb Wolf", "url": "http://robbwolf.com/", "category": "Exercise" },
{"id":6, "title": "Senor Gif", "url": "http://memebase.cheezburger.com/senorgif", "category": "Humor" },
{"id":7, "title": "Wimp", "url": "http://wimp.com", "category": "Humor" },
{"id":8, "title": "Dump", "url": "http://dump.com", "category": "Humor" }
];
$scope.currentCategory = null;
function setCurrentCategory(category) {
$scope.currentCategory = category;
}
$scope.currentCategory = setCurrentCategory;
});

A few errors there must me fixed in your code.
Please attach .setCurrentCategory() to $scope (or this) in controller as Angular realize MVVM architecture. $scope is an object that links your controllers with views. As long as you want to interact with data from controller by method setCurrentCategory you must assign it to $scope
Filters - according to AngularJS documentation need expression – not curly brackets
angular.module('Eggly', [])
.controller('MainCtrl', function($scope) {
$scope.categories = [{
"id": 0,
"name": "Development"
}, {
"id": 1,
"name": "Design"
}, {
"id": 2,
"name": "Exercise"
}, {
"id": 3,
"name": "Humor"
}];
$scope.bookmarks = [{
"id": 0,
"title": "AngularJS",
"url": "http://angularjs.org",
"category": "Development"
}, {
"id": 1,
"title": "Egghead.io",
"url": "http://angularjs.org",
"category": "Development"
}, {
"id": 2,
"title": "A List Apart",
"url": "http://alistapart.com/",
"category": "Design"
}, {
"id": 3,
"title": "One Page Love",
"url": "http://onepagelove.com/",
"category": "Design"
}, {
"id": 4,
"title": "MobilityWOD",
"url": "http://www.mobilitywod.com/",
"category": "Exercise"
}, {
"id": 5,
"title": "Robb Wolf",
"url": "http://robbwolf.com/",
"category": "Exercise"
}, {
"id": 6,
"title": "Senor Gif",
"url": "http://memebase.cheezburger.com/senorgif",
"category": "Humor"
}, {
"id": 7,
"title": "Wimp",
"url": "http://wimp.com",
"category": "Humor"
}, {
"id": 8,
"title": "Dump",
"url": "http://dump.com",
"category": "Humor"
}];
$scope.currentCategory = null;
function setCurrentCategory(category) {
$scope.currentCategory = category;
}
$scope.setCurrentCategory = setCurrentCategory;
});
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='Eggly'>
<div ng-controller='MainCtrl'>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li ng-repeat="category in categories">
{{category.name}}
</li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
<div ng-repeat="bookmark in bookmarks | filter:currentCategory.name">
<button type="button" class="close">×</button>
<button type="button" class="btn btn-link"><span class="glyphicon glyphicon-pencil"></span>
</button>
{{bookmark.title}}
</div>
<hr/>
</div>
</div>
</div>
</div>
</div>

We Keep Coding

JavaScript is the programming language of the Web.

how can I get child elements in angularjs - javascript

Related

How to make the radio button dynamic in angular

How to keep matched row on top of other rows in " smart-table " irrespective of Pagination?

angularJS how to get index value on every row in table using ui-bootstrap pagination?

angularJs ng -Repeat over an array of json object

Filters not working - Angularjs

Categories

Resources