AngularJS : Variables in ng-model - javascript

I have a loop ng-repeat
<div ng-repeat="data in datas">
Name: {{data.name}} <input type="text" ng-model="age">
</div>
I want $scope.age become to $scope.age_data.name. Eg: $scope.age_Tan, $scope.age_Jim...
So i have tried ng-model="age_{{data.name}}" but it make error.
How to solve this?

The "right" way to do this is to, in the controller, do this:
$scope.ages = {};
Then in the template:
Name: {{data.name}} <input type="text" ng-model="ages[data.name]">
Should work...

What you show here won't work exactly here's a couple of options
angular.module('myApp', [])
.controller('MyCtrl', function() {
var vm = this;
vm.datas = [{
name: 'thing1'
}, {
name: 'thing2'
}, {
name: 'thing3'
}];
})
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body ng-controller="MyCtrl as myCtrl">
Option 1
<div ng-repeat="data in myCtrl.datas">
<input type="text" ng-model="data.age" />
</div>
<br/>
<br/>Option 2
<div ng-repeat="data in myCtrl.datas">
<input type="text" ng-model="myCtrl.age[data.name]" />
</div>
<pre>{{myCtrl|json}}</pre>
</body>
</html>

I am not sure why you want to keep age of a person in another object/container. Here is the solution which may help you rethink you design.
$scope.people= [
{name: 'Tan', age: 20},
{name: 'Jim', age: 21}
];
<div ng-repeat="person in people">
Name: {{person.name}} <input type="text" ng-model="person.age">
</div>

Related

angular js filter with ng-repeat not working until full text match

Hi have used filter with ng-repeat to search records
like
<input type="text" ng-model="search">
<tr ng-repeat="data in vm.records | filter:search"></tr>
filter is only worked when whole text match like I have records
user1,user,test1,test2 if i type u or t only it is not showing any result and if I type user1 then it matched record
please suggest me any idea
thanks in advance.
Check this might be helpful.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="namesCtrl as vm">
<input ng-model="name">
</br>
</br>
Filter All Field
<ul>
<li ng-repeat="x in vm.names | filter : name">
{{ x.name }}
</li>
</ul>
Filter Specific Field
<ul>
<li ng-repeat="x in vm.names | filter : {name:name}">
{{ x.name }}
</li>
</ul>
</div>
<script>
angular.module('myApp', []).controller('namesCtrl', function ($scope) {
this.names = [{
name: 'user1',
last: 'last1'
}, {
name: 'user2',
last: 'last1'
}, {
name: 'user3',
last: 'last3'
}, {
name: 'test1',
last: 'last4'
}];
});
</script>
</body>
</html>
Your example should be working with a single letter match. If you type u it will show user1 and user2, if you type t it will show test1 and test2:
var app = angular.module('myApp', []);
app.controller('myCtrl', function() {
this.records = [
{ name: 'user1' },
{ name: 'user2' },
{ name: 'test1' },
{ name: 'test2' }
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl as vm">
<input type="text" ng-model="search">
<table>
<tr ng-repeat="data in vm.records | filter:search">
<td>{{data.name}}</td>
</tr>
</table>
</div>
Working plnkr
http://embed.plnkr.co/Oza8cb4sz32g8QOSCWqT/
Ignore the HTML.
There's no problem in the ng-repeat or the filter model. You need to change the structure of the binding declaration.
Please try to post full code. Cheers!
Please share your vm.records array withing object so you should try with
<tr ng-repeat="data of vm.records | filter:search"></tr>
please show below example may be helpful to you
example

Nested ng-repeat doesn't work inside <input>

I have a $scope param that looks like this:
$scope.filters = [{name: "Brands", brands: ['Brand1', 'Brand2', 'Brand3']},
{name: "Catalogs", brands: ['Cat1', 'Cat2', 'Cat3']}];
In the html file I then try to display this as a list like this:
<div ng-repeat="filter in filters"><h3>{{filter.name}}</h3>
<input type="checkbox" ng-repeat="brand in filter.brands"> {{brand}}<br>
</div>
The filter.name works, as I see "Brands" and "Catalogs", but below them I see empty checkboxes.
The only way to get it to work is to take the ng-repeat out of the input and put it outside in a label or something.
Am I missing something here?
like this
var app = angular.module("app",[]);
app.controller("ctrl" , function($scope){
$scope.filters = [{name: "Brands", brands: ['Brand1', 'Brand2', 'Brand3']},
{name: "Catalogs", brands: ['Cat1', 'Cat2', 'Cat3']}];
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div ng-repeat="filter in filters"><h3>{{filter.name}}</h3>
<div ng-repeat="brand in filter.brands">
<input type="checkbox" ng-model="brands"> {{brand}}<br>
</div>
</div>
</div>

AngularJS the scope value does not display in the views

I am a newbie in angularjs; the scope value are not displaying in the views.
I have two apps: myApp and ram - each one having their controllers.
I'm trying to display scope values.
Only myApp shows values but ram does not.
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>
<div ng-app="ram" ng-controller="myCtrl2">
First Name: <input type="text" ng-model="firstName2"><br>
Last Name: <input type="text" ng-model="lastName2"><br>
<br>
Full Name: {{firstName2 + " " + lastName2}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>
<script>
var app2 = angular.module('ram', []);
app2.controller('myCtrl2', function($scope) {
$scope.firstName2= "ram";
$scope.lastName2= "babu";
});
</script>
You have to bootstrap modules to have multiple ng-app in your page.
<html>
<head>
<script src="angular.min.js"></script>
</head>
<body>
<div id="App1" ng-app="shoppingCart" ng-controller="ShoppingCartController">
<h1>Your order</h1>
<div ng-repeat="item in items">
<span>{{item.product_name}}</span>
<span>{{item.price | currency}}</span>
<button ng-click="remove($index);">Remove</button>
</div>
</div>
<div id="App2" ng-app="namesList" ng-controller="NamesController">
<h1>List of Names</h1>
<div ng-repeat="_name in names">
<p>{{_name.username}}</p>
</div>
</div>
<script>
var shoppingCartModule = angular.module("shoppingCart", [])
shoppingCartModule.controller("ShoppingCartController",
function($scope) {
$scope.items = [
{product_name: "Product 1", price: 50},
{product_name: "Product 2", price: 20},
{product_name: "Product 3", price: 180}
];
$scope.remove = function(index) {
$scope.items.splice(index, 1);
}
}
);
var namesModule = angular.module("namesList", [])
namesModule.controller("NamesController",
function($scope) {
$scope.names = [
{username: "Nitin"},
{username: "Mukesh"}
];
}
);
angular.bootstrap(document.getElementById("App2"),['namesList']);
</script>
</body>
</html>
You can not use two apps on the same page. If you do that then you will need to use Angular Bootstrap.
First assign your second div an id e.g id ="ramID" to something like below
<div id="ramID" ng-app="ram" ng-controller="myCtrl2">
then add this line to your code to your script
angular.bootstrap(document.getElementById("ramID"),['ram']);
hope it helps.

How can I get a value from a form and use it in a controller?

My code: http://pastebin.com/AyFjjLbW
I'm trying to learn AngularJS and in the beginning it was going well but now I am stuck. What I want to do is use the drop down menu to select a priority and a type of job that can be done but I can not figure out how on earth I can get a value from a input tag and use it in my script when I try to push a value from an array into my object.
You can see my failed attempt here:
priority: $scope.priority[other_options.worktype]
Thank you!
Here is the proper way of doing what you want :
<!DOCTYPE html>
<html lang="en-us" ng-app="todoApp">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<head>
<title>Alex's Todo List</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div ng-controller="placingItems">
<h1>To Do List</h1>
<center><button type="button" ng-click = "clear_all()">Clear List</button></center>
<p>What to do: <input type="text" ng-model="thing">
<form name="other_options">
<select ng-model="worktype" ng-options="worktype.label for worktype in worktypeList" ></select>
<select ng-model="priority" ng-options="priority.label for priority in priorityList" ></select>
<input type="submit" ng-click="add()">
</form>
</p>
<div class="block">
<p>To do:</p>
<center><li ng-repeat = "x in items">
<span ng-style="cmplt">{{ x.name }}</span> {{ x.type.label }} {{ x.priority.label }}
<button type="button" ng-click="cmplt={color: 'gray', 'text-decoration': 'line-through'}">Completed</button>
</li></center>
</div>
</div>
</body>
</html>
<script>
angular.module('todoApp.controllers', [])
.controller('placingItems', ['$scope', function($scope) {
$scope.thing = "Nothing";
$scope.items = [];
$scope.priorityList = [{
label:'Top Priority',
id: 1
}, {
label: 'Mid Priority',
id: 2
}, {
label: 'Low Priority',
id: 3
}];
$scope.worktypeList = [{
label:'Work',
id: 1
}, {
label: 'Personal',
id: 2
}];
$scope.add = function(){
$scope.items.push({
name: $scope.thing,
priority: $scope.priority,
type: $scope.worktype
});
};
$scope.clear_all = function(){
$scope.items = [];
};
}]);
var app = angular.module('todoApp', ['todoApp.controllers']);
</script>
Your form field should have ng-model associated with them so that you can access those value inside controller scope. Basically when your create a form with name attribute, at that time name attribute gets added to controller scope variable & then that scope variable will give you all the form related validation inside the object.
Markup
<form name="other_options" ng-init="formData={}">
<select name="worktype" ng-model="formData.worktype">
<option selected value="-" name = "work">Work</option>
<option value="1" name="home">Home</option>
</select>
<select name="priortype" ng-model="formData.worktype">
<option value="0" name="top">Top Priority</option>
<option selected value="1" name="mid">Mid Priority</option>
<option value="2" name="low">Low Priority</option>
</select>
<input type="submit" ng-click="add()">
</form>
Then only you can access this value inside controller using like $scope.formData.worktype
Code
$scope.add = function(){
$scope.items.push(
{name: $scope.thing,
priority: $scope.formData.worktype, //or $scope.formData["worktype"]
type: $scope.type[1]
});
};
Take a look at http://www.quora.com/How-do-I-get-HTML-form-input-value-in-AngularJs-controller it is very good. Hope this is what you need.

Angular: need search bar working on 2 different ng-repeat

I am using Ionic/Angular.
I have a search bar which I need to have it working in 2 different scenarios BUT at the same time. Look:
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<!--here is the ng-model query-->
<input type="search" placeholder="Search" ng-model="query">
</label>
<!--here is the 1st filter:query-->
<div ng-repeat="sport in sports | filter:query" ng-show="sport.leagues.length">
<div>
<strong>{{sport.name}}</strong>
</div>
<!--here is the 2nd filter:query-->
<div class="item item-button-right"
ng-repeat="league in sport.leagues | filter:query"
on-tap="goToLines(league)">
{{league.name}}
</div>
so, all I need is that when the user is searching for something, the search bar returns sport.name and league.name, is it clear for you guys?
UPDATE*
this is the service where I am calling sports:
getSports: function(agent) {
var defer = $q.defer();
LocalForageFactory.retrieve(CONSTANT_VARS.LOCALFORAGE_SPORTS)
.then(function(sports) {
if (!_.isNull(sports)) {
defer.resolve(_.values(sports));
}else {
$http.get(CONSTANT_VARS.BACKEND_URL + '/lines/sports/' + agent)
.success(function(sports) {
//forcing array instead of object
sports = _.values(sports);
sports = _.sortBy(sports, function(sport) {
return sport.priority;
});
LocalForageFactory.set(CONSTANT_VARS.LOCALFORAGE_SPORTS, sports);
defer.resolve(sports);
})
.error(function(err) {
defer.reject(err);
});
}
});
return defer.promise;
},
If you wanted to search either field, drop the second filter and use the special $ to traverse the object hierarchy. See the documentation for more info.
var myApp = angular.module('myApp',[]);
myApp.controller('TestController', ['$scope', function($scope) {
$scope.sports = [
{name: 'Basketball', leagues: [{name: 'Mens'}, {name: 'Womens'}]},
{name: 'Volleyball', leagues: [{name: 'Mens'}, {name: 'Womens'}]},
{name: 'test', leagues: [{name: 'test'}]}
];
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="TestController">
<input type="search" placeholder="Search" ng-model="query">
<div ng-repeat="sport in sports | filter:{$: query}" ng-show="sport.leagues.length">
<div>
<strong>{{sport.name}}</strong>
</div>
<div class="item item-button-right"
ng-repeat="league in sport.leagues"
on-tap="goToLines(league)">
{{league.name}}
</div>
</div>
</div>

Categories