I want to call an attribute of an data-binded object dynamically based on the ng-repeat object. I have created a simple setup, can anybody solve this, if it is solvable like this?
The input should get the value of the "person.item".
For example: person.id -> 100
http://jsfiddle.net/q7gs3njj/
html
<div ng-app ng-controller="TestController">
<div ng-repeat="item in list">
<label>{{ item }}:</label>
<input type="text"/>
</div>
{{list}}
</div>
javascript
function TestController($scope) {
$scope.list = [ 'id', 'name', 'gender' ];
$person = { id:'100', name:'John', age:'22', gender:'Male' };
}
Thank you!
Of course, just use item as index:
<div ng-app ng-controller="TestController">
<div ng-repeat="item in list">
<label>{{ item }}:</label>
<input type="text" ng-model="person[item]"/>
</div>
{{list}}
</div>
And the person must be in the scope:
function TestController($scope) {
$scope.list = [ 'id', 'name', 'gender' ];
$scope.person = { id:'100', name:'John', age:'22', gender:'Male' };
}
Related
I am trying to dynamically filter in my html. When I search for CMS, I need the number on the left panel to update to '1' for both Performance and Investments. I also need the applet to display on the right panel.
(With my current code I am able to display the applets only when I have a category selected, and does not update the number on the left panel)
Image
Can anyone help me better understand what I am missing here? Any help would be much appreciated!
My data:
$scope.categories = [
{
'name': 'Performance',
'applets': ['CMS', 'Performance Snapshot']
},
{
'name' : 'Investments',
'applets' : ['Commitment Widget', 'CMS']
},
{
'name' : 'Operations',
'applets' : []
}
]
controller:
$scope.categories = categories;
$scope.chooseCategory = function(category) {
$scope.selectedCategoryApplets = category.applets;
}
html:
<div id="app">
<h1>Library</h1>
<div ng-controller="MainCtrl" class="container">
<div class="row">
<div class="col-sm-4">
<h4>Categories</h4>
<input type="text" value="searchText" ng-model="searchText" placeholder="Search Applets" />
<div ng-repeat="category in categories | filter: searchText" ng-click="chooseCategory(category)">
<div>{{category.name}}<span>{{category.applets.length}}</span></div>
</div>
</div>
</div>
<div class="col-sm-8">
<h3>Applets</h3>
<div ng-repeat="value in selectedCategoryApplets | filter: searchText">
{{value}}
</div>
</div>
</div>
</div>
You should have a different variable for displaying the filtered result.
JS:
$scope.filteredCategories = $scope.categories;
$scope.filterBySearchText = function(searchText) {
if (searchText === undefined || searchText.trim() === "") {
$scope.filteredCategories = $scope.categories;
return;
}
$scope.filteredCategories = angular.copy($scope.categories).map(cat => {
cat.applets = cat.applets.filter(
app => app.indexOf(searchText) !== -1
);
return cat;
});
};
HTML:
<div class="row">
<div class="col-sm-4">
<h4>Categories</h4>
<input type="text" value="searchText" ng-model="searchText" placeholder="Search Applets" ng-change="filterBySearchText(searchText)"/>
<div ng-repeat="category in filteredCategories" ng-click="chooseCategory(category)">
<div>{{category.name}}<span>{{category.applets.length}}</span></div>
</div>
</div>
</div>
<div class="col-sm-8">
<h3>Applets</h3>
<div ng-repeat="value in selectedCategoryApplets | filter: searchText">
{{value}}
</div>
</div>
https://stackblitz.com/edit/angularjs-nxwvce
Controller:
$scope.filter = function() {
$timeout(function() {
$scope.filteredItems = $scope.filtered.length;
}, 10);
};
$scope.sort_by = function(predicate) {
$scope.predicate = predicate;
$scope.reverse = !$scope.reverse;
};
HTML:
Input element used for filter
<div>
Filter
<i class="fa fa-filter" aria-hidden="true"></i>
</div>
<input type="text" ng-model="search" ng-change="filter()" placeholder="Filter" class="form-control" />
<div> where data is getting filtered
<div ng-repeat="item in filtered = (list | filter:search | orderBy : predicate :reverse) | startFrom:(currentPage-1)*entryLimit | limitTo:entryLimit">
......
</div>
Hope this works!!
I want to bind my input field to my select option. so if the select option is Yes, the input field should be visible and if it is No, the input field should be hidden.
(function(){
var app = angular.module('spa',[
$rootScope.options = [
{
id: 0,
name: 'No'
},
{
id: 1,
name: 'Yes'
}
]
]);
}());
<form name="newData" class="ng-scope ng-pristine ng-invalid ng-invalid-required" error-popup="newData" novalidate>
<div class="form-group item item-input item-select">
<div class="input-label">
Booking Fee Paid
</div>
<select name="booking" ng-model="user.booking" class="form-control ng-pristine ng-invalid ng-invalid-required" ng-options="option.name for option in options track by option.id" ng-init ="user.booking = options[0]" required>
</select>
</div>
<div class="row" ng-show="user.booking.name == 'Yes'">
<div class="col">
<div class="form-group item item-input">
<input type="text" name="amount" ng-model="user.amount" class="form-control" placeholder="Amount">
</div>
</div>
</div>
</form>
http://plnkr.co/edit/v0NrbTeigo3lm1njRu9A?p=preview
Any help is appreciated
I suggest you to go through the beginner tutorials # angularjs.org.
Here is a working sample that does just what you're asking for:
angular.module('app', [])
.controller('Sample', Sample);
function Sample() {
this.options = [{
id: 0,
name: 'No'
}, {
id: 1,
name: 'Yes'
}];
this.booking = this.options[0];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="Sample as vm">
<select name="booking" ng-model="vm.booking" ng-options="option.name for option in vm.options"></select>
<pre>{{ vm.booking | json }}</pre>
<input type="text" ng-show="vm.booking.name === 'Yes'"/>
</div>
Second parameter specifies required modules not the implementation:
angular.module(name, [requires], [configFn]);
So you had inject error. Here is the fixed code:
http://plnkr.co/edit/L02U4Cq0HIqeLL1AOcbl
var app = angular.module('spa', []);
app.controller('MyController', function($scope) {
$scope.options = [{
id: 0,
name: 'No'
}, {
id: 1,
name: 'Yes'
}];
});
I have one controller, controller's template/view as below,
myController
angular.module('myApp', []).
controller('myController', ['$scope', function($scope) {
$scope.myObject = {};
}]);
myView
<div class="container" ng-app="myApp">
<form name="myForm" novalidate ng-controller="myController">
<div class="form-group">
<label for="firstname" class="control-label col-xs-2">Name</label>
<div class="col-xs-10">
<input type="text" ng-model="myObject.firstname" id="firstname">
</div>
</div>
<div class="form-group">
<label for="lastname" class="control-label col-xs-2">LastName</label>
<div class="col-xs-10">
<input type="text" ng-model="myObject.lastname" id="lastname">
</div>
</div>
</form>
</div>
here whenever user enters any data it gets reflected to myObject with firstname and lastname as dynamic properties for myObject.
Now my new requirement is to add multiple dynamic views for firstname and lastname in the same view(For that I will be creating a directive and appending dynamically), and now I want myObject to be an array of objects like
myObjectArray = [{firsname: "abc", lastname: "xyz"},{firsname: "abc", lastname: "xyz"},{firsname: "abc", lastname: "xyz"},{firsname: "abc", lastname: "xyz"}]
and here each object should be populated through dynamically added views by user input using angular two way binding. But I am not sure how can I achieve this with angular, how to add object to array whenever there is a new directive template added to view dynamically.
In Angular you should avoid thinking in terms of dynamic controls.
Here is the approach
You want to list firstname, lastname objects
You want to add a new object to this list.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.items = [];
$scope.itemsToAdd = [{
firstName: '',
lastName: ''
}];
$scope.add = function(itemToAdd) {
var index = $scope.itemsToAdd.indexOf(itemToAdd);
$scope.itemsToAdd.splice(index, 1);
$scope.items.push(angular.copy(itemToAdd))
}
$scope.addNew = function() {
$scope.itemsToAdd.push({
firstName: '',
lastName: ''
})
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="plunker" ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<div ng-repeat="item in items">
{{item.firstName}} {{item.lastName}}
</div>
<div ng-repeat="itemToAdd in itemsToAdd">
<input type="text" ng-model="itemToAdd.firstName" />
<input type="text" ng-model="itemToAdd.lastName" />
<button ng-click="add(itemToAdd)">Add</button>
</div>
<div>
<button ng-click="addNew()">Add new</button>
</div>
</body>
Notice these are simply talking about model. Here is a plunk
I'm using Angular and I've this object:
$scope.items = {
'abcdhx3': {name:'file1.jpg', type:'.jpg', size:30000},
'sxcdhb2': {name:'file2.jpg', type:'.png', size:30000},
'k4cdhx5': {name:'file3.jpg', type:'.jpg', size:30000},
'23cdhd3': {name:'file4.jpg', type:'.png', size:30000},
'ascdhx3': {name:'file45.jpg', type:'.png', size:30000}
};
I want to filter this object based on "name" and "type" values that I can get from input texts. So how can I do that using a filter in ng-repeat, for example: I want to show files that contains "file4" with type ".png".
<div data-ng-repeat="(key, item) in items">
<div>{{ item.name }}</div>
</div>
I've solved the problem using a transformation filter like this:
angular.module('test').filter('itemsFilter', [
function() {
return function(items) {
var list = [];
for (var i in items) {
list.push(items[i]);
}
return list;
};
}
]);
And filtering items before apply the search filter
Name: <input type="text" ng-model="search.name" />
Type: <input type="text" ng-model="search.type" />
<div ng-repeat="item in items | itemsFilter | filter:search">
<li>{{item.name}}</li>
<li>{{item.type}}</li>
</div>
You can do this by using a simple Filter:
HTML
Name: <input type="text" ng-model="search.name" />
Type: <input type="text" ng-model="search.type" />
Whatever: <input type="text" ng-model="search.$" />
<ul ng-repeat="item in items | filter:search">
<li>{{item.name}}</li>
<li>{{item.type}}</li>
</ul>
I have the following form
<div ng-controller="Formctrl">
<form ng-submit="getNames(pd)">
<fieldset>
<div class="row">
<section class="col col-4" ng-repeat="n in [] | range:5">
<label class="input">
<input type="text" placeholder="Names" ng-model="pd.names[$index]" >
</label>
</section>
</div>
</fieldset>
</form>
</div>
Basically i want to bind the names in an array form submission. But i am getting the following error
TypeError: Cannot set property '0' of undefined
Here is my Controller
angular.module('myApp')
.controller('FormCtrl', function($rootScope,$scope){
$scope.pd = {};
$scope.getNames = function() { console.log($scope.pd); };
});
I need the output something like below. How do i achieve it??
{
names: [
'Name 1',
'Name 2',
'Name 3',
'Name 4',
]
}
Hey You just try to reach an undefined element just define names in controller...
$scope.pd = {names : []};
here is a PLUNKER...