I am new to the ANGULAR WORLD, please help
I have the following table row
<tr data-ng-repeat="obj in myObjs | filter:search">
<td><strong data-ng-hide="obj.editMode">{{ obj.ObjID }}</strong></td>
<td>
<p data-ng-hide="obj.editMode">{{ obj.Key }}</p>
<p data-ng-show="obj.editMode">
<input type="text" data-ng-model="obj.Name" />
</p>
</td>
<td>
<p data-ng-hide="obj.editMode">{{ obj.Value }}</p>
<div ng-init="objKVP = {{obj.Value}}">
<ul class="example-animate-container">
<li class="animate-repeat" ng-repeat="val in objKVP">
{{val.Key}} : {{val.Value}}
</li>
</ul>
</div>
</td>
At ng-init = objKVP, i'll get the value like
[{'Key':'test','Value':'https://google.com'},
{'Key':'test1','Value':'testval1'},
{'Key':'test2','Value':'t#testval2'},
{'Key':'test3','Value':'testval3'},
{'Key':'test4','Value':'testval3'}]
But when i try to get the Key and Value , its not populating inside the LI tag.
And if I post the above Key Value Pair directly inside the objKVP then it displays the Key and value inside the LI tag,
so the problem is with dynamic values, (though it shows up while i inspect the element)
help
You can try to use the example below:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('myController', [
'$scope', function($scope) {
$scope.init = function() {
$scope.a = 'Apples';
$scope.b = 'Bees';
$scope.c = 'Zebras';
$scope.objKVP = [
{ 'Key': 'test', 'Value': 'https://google.com' },
{ 'Key': 'test1', 'Value': 'testval1' },
{ 'Key': 'test2', 'Value': 't#testval2' },
{ 'Key': 'test3', 'Value': 'testval3' },
{ 'Key': 'test4', 'Value': 'testval3' }
];
};
// runs once per controller instantiation
$scope.init();
}
]);
</script>
<body ng-controller="myController">
<h2>JavaScript Projects</h2>
<br>
<h2 ng-bind="a+ ' ' + b +' ' +c "></h2>
<table>
<tr ng-repeat="obj in objKVP | filter:search">
<td><strong ng-hide="obj.editMode">{{ obj.ObjID }}</strong></td>
<td width="100px;">
<p ng-hide="obj.editMode">{{ obj.Key }}</p>
</td>
<td width="200px;">
<p ng-hide="obj.editMode">{{ obj.Value }}</p>
<p ng-show="obj.editMode">
<input type="text" ng-model="obj.Name" />
</p>
</td>
</tr>
</table>
</body>
Related
When you press this button you should load the data and then show in the list. I'm using the ng-click and ng-repeat functions.
What is the correct way to declare the functions inside the script? I think that's where I'm failing.
<script>
var app = angular.module('myApp', [])
app.controller('myCtrl', ['$scope', function($scope) {
$scope.count = 0;
$scope.myClick = function() {
$scope.count++;
};
$scope.Button = function() {
$scope.myClickList = studentInfo;
};
}]);
app.value('studentInfo', [
{ id: 1, name: 'Mahedee Hasan', credit: 20, semester: '8th' },
{ id: 3, name: 'Enamul Haque', credit: 15, semester: '7th' },
{ id: 4, name: 'Arefin Billah', credit: 15, semester: '6th' }
]);
</script>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1>RODRIGO</h1>
</div>
<div class="modal-body width">
<div class="group-control" ng-app="myApp" ng-controller="myCtrl">
<div class="row">
<div class="col-sm-6">
<button ng-click="myClick()" class="form-control">Count</button>
<button ng-click="myClickList()" class="form-control">List</button>
</div>
<div class="col-sm-6"align=center>
<p><h1><b>{{count}}</b></h1></p>
</div>
</div>
<hr>
<table class="table">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Credit</th>
<th>Semester</th>
</tr>
</thead>
<tr ng-repeat="s in studentInfo">
<td>{{s.id}}
</td>
<td>{{s.name}}
</td>
<td>{{s.credit}}
</td>
<td>{{s.semester}}
</td>
</tr>
</table>
</div>
</div>
<div class="modal-footer">
<h6>RODRIGO</h6>
</div>
</div>
</div>
My full example is here
Angularjs value is one of provider recipe. Registered value can be accessible via injecting it factory function. Inject studentInfo that inside your controller factory function to get hold on desired values.
app.controller('myCtrl', ['$scope', 'studentInfo', //< -- injected here
function($scope, studentInfo) {
......
}
]);
Forked Codepen
I want to highlight search text under ng-repeat which is creating table.
I found one filter as my solution but it's not working on tables.
Can anyone points me where I am wrong to make it work.
<body ng-app="Demo">
<h1>Hello Plunker!</h1>
<div class="container" ng-controller="Demo">
<input type="text" placeholder="Search" ng-model="search">
<table>
<thead>
<th>Some</th>
<th>MyName</th>
</thead>
<tbody>
<tr ng-repeat="item in data | filter:search"
>
<td>
<td>{{item.title}}</td>
<td>{{item.name}}</td>
</td>
</tr>
</tbody>
<!-- with filter -->
</table>
</div>
<script>
angular.module('Demo', [])
.controller('Demo', function($scope) {
$scope.data = [
{ title: "Bad",name:'kaushik' },
{ title: "Good",name:'1kaushik' },
{ title: "Great",name:'2kaushik' },
{ title: "Cool" ,name:'3kaushik'},
{ title: "Excellent",name:'4kaushik' },
{ title: "Awesome",name:'5kaushik' },
{ title: "Horrible",name:'6kaushik' },
]
})
.filter('highlight', function($sce) {
return function(text, phrase) {
if (phrase) text = text.replace(new RegExp('('+phrase+')', 'gi'),
'<span class="highlighted">$1</span>')
return $sce.trustAsHtml(text)
}
})
</script>
</body>
This is working copy of the & demo the same thing I wants is with table.
You're not applying the highlight filter and you also have nested <td> elements. Try this:
<tr ng-repeat="item in data | filter:search">
<td ng-bind-html="item.title | highlight:search></td>
<td ng-bind-html="item.name | highlight:search"></td>
</tr>
angular.module('Demo', [])
.controller('Demo', function($scope) {
$scope.data = [{
title: "Bad",
name: 'kaushik'
},
{
title: "Good",
name: '1kaushik'
},
{
title: "Great",
name: '2kaushik'
},
{
title: "Cool",
name: '3kaushik'
},
{
title: "Excellent",
name: '4kaushik'
},
{
title: "Awesome",
name: '5kaushik'
},
{
title: "Horrible",
name: '6kaushik'
},
]
})
.filter('highlight', function($sce) {
return function(text, phrase) {
if (phrase) {
text = text.replace(new RegExp('(' + phrase + ')', 'gi'),
'<span class="highlighted">$1</span>');
}
return $sce.trustAsHtml(text)
}
});
.highlighted {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
<body ng-app="Demo">
<h1>Hello Plunker!</h1>
<div class="container" ng-controller="Demo">
<input type="text" placeholder="Search" ng-model="search">
<table>
<thead>
<th>Some</th>
<th>MyName</th>
</thead>
<tbody>
<tr ng-repeat="item in data | filter:search">
<td>
<td ng-bind-html="item.title | highlight:search"></td>
<td ng-bind-html="item.name | highlight:search"></td>
</td>
</tr>
</tbody>
<!-- with filter -->
</table>
</div>
<script>
</script>
</body>
I like to create a table. for each column in this table I like to use a different model. So if I drop a element in one of my two columns it should store the element in the model with respect to the column. Here is link to a fiddle page where I tried something. Is that the easiest way to do so?
<div ng-app="myApp" ng-controller="MyCtrl">
<ul>
<li ng-repeat="person in data">
<div data-drag="true" data-jqyoui-options="{revert: 'invalid', helper: 'clone'}" jqyoui-draggable="{animate: true, placeholder: 'keep'}" ng-model="person">
{{ person.name }}
</div>
</li>
</ul>
<table >
<tr style="background-color:orange;">
<td ng-model="src" data-drop="true" jqyoui-droppable="{multiple:true, onDrop: 'myDrop'}">Add your items here</td>
<td ng-model="tar" data-drop="true" jqyoui-droppable="{multiple:true, onDrop: 'myDrop'}">Add your items here</td>
</tr>
<tr ng-repeat="person in src track by $index">
<td >{{ person.name }}</td>
<td >{{ tar[$index].name }}</td>
</tr>
</table>
</div>
<script>
var myApp = angular.module('myApp', ['ngDragDrop']);
myApp.controller('MyCtrl', function($scope, $timeout) {
var src = [{
name: 'bob'
}, {
name: 'mary'
}];
var tar = [{
name: 'bob'
}, {
name: 'mary'
}];
$scope.people = [];
$scope.people.src = [];
$scope.people.tar = [];
$scope.data = src;
$scope.hideMe = function() {
return $scope.people.src > 0;
}
$scope.myDrop = function(event, ui) {
console.log($scope.people);
}
});
</script>
This is my code structure.Here I have multiple roles and region text boxes accordingly.Now if I entered wrong value then how can I clear that particular text box?
<tbody>
<tr ng-repeat="od in default_role">
<td>{{od.role}}</td>
<td>
<datalist id="all_region_list"> <option data-ng-repeat="or in list_region" value="{{or}}"> </datalist>
<input class="form-control" type="text" data-ng-model="region" list="all_region_list" placeholder="Region" title="Region" ng-keyup='get_region_values("Region");' ng-blur='location_value_check("Region",region,$index)'>
</td>
</tr>
</tbody>
You need to set the model's property (which is connected to the particular textbox) value to ''. So it will clear the textbox.
Demo:
angular.module('myApp', []).controller('ctrl', function($scope) {
$scope.list = [
{
name: 'name1'
},
{
name: 'name2'
},
{
name: 'name3'
},
{
name: 'name4'
}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<div ng-app="myApp" ng-controller="ctrl">
<table>
<tr ng-repeat="item in list">
<td><input type="text" ng-model="item.name" placeholder="name" /></td>
<td><button ng-click="item.name = ''">Clear textbox</button></td>
<td>Model: {{item | json }}</td>
</tr>
</table>
</div>
If you want to just clear the textbox without changing the model:
angular.module('myApp', []).controller('ctrl', function($scope) {
$scope.list = [
{
name: 'name1'
},
{
name: 'name2'
},
{
name: 'name3'
},
{
name: 'name4'
}
];
angular.element(document).ready(function() {
$('button').click(function() {
$(this).parents('tr').first().find('input').val('');
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<div ng-app="myApp" ng-controller="ctrl">
<table>
<tr ng-repeat="item in list">
<td><input type="text" ng-model="item.name" placeholder="name" /></td>
<td><button>Clear textbox</button></td>
<td>Model: {{item | json }}</td>
</tr>
</table>
</div>
I have a method where I iterate through an array, using ng-repeat and pair each item with a value from a dropdown list.
Here is a jsfiddle of that method:
https://jsfiddle.net/4zbvv5gq/4/
<header>
<title>myTittle</title>
</header>
<body ng-app='myApp' ng-controller='myController'>
<div class="col-md-10 col-md-offset-1">
<div>
<form>
<table class="table table-striped">
<thead>
<th>From File</th>
<th>Map To</th>
</thead>
<tr class="selector-row" ng-repeat="(key,value) in List1">
<td><span id="myspan">{{value}}</span>
</td>
<td style="padding:10px;">
<select name="repeatSelect" id="repeatSelect" ng-model="data[value]" class="form-control">
<option ng-repeat="(key,value) in Match" value="{{value}}">{{value}}</option>
</select>
</td>
</tr>
</table>
</form>{{ data }}</div>
</div>
</body>
var app = angular.module('myApp', [])
app.controller('myController', ['$scope', function ($scope) {
$scope.data = {};
$scope.List1 = ['product1', 'product2', 'product3', 'product4', 'product5'];
$scope.Match = ['match1', 'match2', 'match3', 'match4', 'match5'];
}])
My challenge is I want to be able to let a user click on something like an "add" link in any of the rows and 1)create a duplicate of that row, then 2) select a different value from the select list.
You just need to add a "Add Row" button at the end and push a new value to your List1 like this in your controller. See an update to your fiddle here.
$scope.addRow = function(){
var len = $scope.List1.length;
$scope.List1.push('product'+(len+1));
}
And right after your table, add a button that calls the above function:
</table>
<button ng-click="addRow()">Add a row</button>
Dublicate row in angular is possible.I give an sample code for dublicate row
index.html part:
<body ng-controller="MyCtrl">
<div style="padding: 10px;">
<h2>Languages</h2>
<br/>
<div style="width: 90%; display: inline-block; border: 1px silver dotted;">
<div class="row">
<div class="col-xs-3">
<select class="form-control" ng-init="nativeLanguage.level = 'Native'" data-ng-model="nativeLanguage.level" tooltip="Level">
<option value="Native" ng-selected="true">Native</option>
</select>
</div>
<div class="col-xs-4">
<select class="form-control" data-ng-model="nativeLanguage.name" tooltip="Language">
<option value="">Language</option>
<option value="EN">English</option>
<option value="IT">Italian</option>
<option value="DE">German</option>
<option value="FR">French</option>
</select>
</div>
<div class="col-xs-3">
<input type="text" data-ng-model="nativeLanguage.remark" class="form-control" placeholder="Remark" tooltip="Remark">
</div>
<div class="col-xs-2">
</div>
</div>
<div select-last ng-repeat='language in languages'></div>
</div>
<a class="btn" style="margin-bottom: 27px;" href="#" tooltip="Add" ng-click='addRow()'>
<i class="glyphicon glyphicon-plus"></i>
</a>
<pre>{{nativeLanguage | json}}</pre>
<pre>{{languages | json}}</pre>
</div>
</body>
</html>
ap.js part:
var myApp = angular.module('myApp',[]);
myApp.directive('selectLast', function () {
return {
restrict: 'A',
transclude: true,
templateUrl: 'language.html',
/*scope: {
level: '=',
name: '=',
remark: '='
},*/
replace: true
};
});
function MyCtrl($scope) {
$scope.languages = [];
/*var nativeLanguage = {
level: $scope.hr.language.level,
name: $scope.hr.language.name,
remark: $scope.hr.language.remark
};*/
$scope.languages.push($scope.nativeLanguage);
$scope.addRow = function(){
var newLanguage = {
level: $scope.level,
name: $scope.name,
remark: $scope.remark
};
$scope.languages.push(newLanguage);
console.log('+ clicked');
};
$scope.deleteRow = function(rowNo) {
/*$scope.items.splice($scope.newitem);*/
$scope.languages.splice(rowNo, 1);
console.log('- clicked in row ' + rowNo);
};
}