I want to be able to select a person, and when selected, I see his values(name, tel, email, ..):
html :
<td class="leftAlign">
<span class="nullable">
<select ng-model="data.selectedPerson" ng-options="x.name for x in persons">
<option value="">-- Person --</option></select>
<br><br>
{{data.selectedPerson.name}}<br>
{{data.selectedPerson.Addrstr1}}<br>
{{data.selectedPerson.Tel}}<br>
{{data.selectedPerson.Mail}}<br>
<img data-ng-src="{{data.selectedPerson.img}}">
</span>
</td>
It works fine, I can see all the values of the person, and the img too. To reset everything in my html form I have a reset button, with the JS:
$scope.reset = function() {
$scope.data = {};
};
however, I can't erase the img.
in the JS, the persons values are in the array :
$scope.person = [
{name : "MrPerson1",
Addrstr1:"59 road",
Tel: "0234225163",
Email : "direction#gmail.com ",
img : "images/person1.PNG",
}];
Could you help me please?
Check this example, you are removing the data but not the ng-model of the <select>
var Controller = function() {
var vm = this
vm.persons = [{
name: "MrPerson1",
Addrstr1: "59 road",
Tel: "0234225163",
Email: "direction#gmail.com ",
img: "https://lh3.googleusercontent.com/-crlUFIoyB3k/UdzsGwV__AI/AAAAAAAAAXs/ErA8XESRgwk/5LsFP.gif",
}, {
name: "MrPerson2",
Addrstr1: "59 road",
Tel: "0234225163",
Email: "direction#gmail.com ",
img: "https://lh3.googleusercontent.com/-Ta_b7Z96-mE/Ud2hTqB-84I/AAAAAAAABEQ/BPY_MIbLitc/SausageDogAnimation.gif",
}, {
name: "MrPerson3",
Addrstr1: "59 road",
Tel: "0234225163",
Email: "direction#gmail.com ",
img: "https://www.gravatar.com/avatar/e27096ea0e246d04139047d40ff566d2?s=32&d=identicon&r=PG",
}];
vm.data = vm.persons
vm.reset = function() {
vm.data.selectedPerson = {}
};
};
angular
.module('app', [])
.controller('Controller', Controller);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="Controller as vm">
<button ng-click="vm.reset()">Reset</button>
<select ng-model="vm.data.selectedPerson" ng-options="x.name for x in vm.data">
<option value="">-- Person --</option>
</select>
<br><br> {{vm.data.selectedPerson.name}}
<br> {{vm.data.selectedPerson.Addrstr1}}
<br> {{vm.data.selectedPerson.Tel}}
<br> {{vm.data.selectedPerson.Mail}}
<br>
<img ng-if="vm.data.selectedPerson.img" ng-src="{{vm.data.selectedPerson.img}}" />
</div>
Related
I have an app that works well displaying a list of students. When you click on each name, it displays more info about that particular student. However, if I change the order of names through select options or search, wrong student info is displayed.
Here is my view:
<input type="text" ng-model="expression" placeholder="Search Student" />
<div class="select">
<span>Sort By: </span>
<select ng-model="order" ng-show="students.length > 0">
<option selected value="name">Name A-Z</option>
<option value="-name">Name Z-A</option>
<option value="room">Room (first to last)</option>
<option value="-room">Room (last to first)</option>
</select>
</div>
<div ng-repeat="student in students | orderBy: order | filter:expression">
<div class="info">
<div class="img">
<img ng-src="{{student.image}}">
</div>
<h2 style="color: #007acc;"> Student Details For:</h2>
<hr>
<h2>{{student.name}}</h2>
<a ng-href="#!/students/{{$index}}"><button>View Student
Details</button></a>
</div>
</div>
Here is my Js:
var data = [
{
name: "Andrea Toe",
sex: "Female",
room: 12,
cell: "076 861 6184",
image: "images/female.jpg",
checkin: "June 2016"
},
{
name: "John Doe",
sex: "Female",
room: 3,
cell: "063 961 7190",
image: "images/lebo.jpg",
checkin: "01 Feb 2018"
},
{
name: "James Drew",
sex: "Male",
room: 1,
cell: "076 910 3069",
image: "images/male.jpeg",
checkin: "01 Feb 2018"
}
];
app.controller("studentsCtrl", function($scope){
$scope.students = data;
});
app.controller('studentInfoCtrl', ['$scope', '$routeParams',
function($scope, $routeParams) {
$scope.info = data[$routeParams.id];
}]);
What should I do to get it to display correct info even after using search filter or reordering using oderBy?
It is because, when creating the link to the "student details", you use the $index scope variable.
This $index is introduced by the ng-repeat directive and will represent the:
iterator offset of the repeated element (0..length-1)
(from the documentation linked here)
In short, the $index you use to uniquely identify a student when building the corresponding link to their details page depends entirely on its position in the page. It does not at all identify the resource itself!
What you could do is have an id property assigned to each student along with their name, sex etc., like so:
var data = [{
id: 0,
name: "Andrea Toe",
}, {
id: 1,
name: "John Doe",
}, {
id: 2,
name: "James Drew",
}];
And simply refer to that newly introduced property in the urls you create!
<a ng-href="#!/students/{{ student.id }}"><button>View Student Details</button></a>
Searching and sorting are working fine for me:
var data = [{
id: 1,
name: "Andrea Toe",
sex: "Female",
room: 12,
cell: "076 861 6184",
image: "images/female.jpg",
checkin: "June 2016"
},
{
id: 2,
name: "John Doe",
sex: "Female",
room: 3,
cell: "063 961 7190",
image: "images/lebo.jpg",
checkin: "01 Feb 2018"
},
{
id: 3,
name: "James Drew",
sex: "Male",
room: 1,
cell: "076 910 3069",
image: "images/male.jpeg",
checkin: "01 Feb 2018"
}
];
app = angular.module("myapp", []);
app.controller("studentsCtrl", function($scope) {
$scope.students = data;
});
app.controller('studentInfoCtrl', ['$scope', '$routeParams',
function($scope, $routeParams) {
$scope.info = data.filter(function(d){
return d.id == $routeParams.id;
})[0];
}
]);
<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.5.1/angular.min.js"></script>
<div ng-app="myapp" ng-controller="studentsCtrl">
<input type="text" ng-model="expression" placeholder="Search Student" />
<div class="select">
<span>Sort By: </span>
<select ng-model="order" ng-show="students.length > 0">
<option selected value="name">Name A-Z</option>
<option value="-name">Name Z-A</option>
<option value="room">Room (first to last)</option>
<option value="-room">Room (last to first)</option>
</select>
</div>
<div ng-repeat="student in students | filter:expression | orderBy: order ">
<div class="info">
<!-- <div class="img">
<img ng-src="{{student.image}}">
</div> -->
<h2 style="color: #007acc;"> Student Details For:</h2>
<hr>
<h2>{{student.name}}</h2>
<a ng-href="#!/students/{{student.id}}"><button>View Student
Details</button></a>
</div>
</div>
</div>
i have a dynamic form in angular. and i want to send the response as json. how do i generate JSON from the form?
here's the complete code,I have to get json, and post it to some api.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="dyf" ng-submit="submit()">
<form name="userFormOne" novalidate>
<table>
<tr class="form-group" ng-repeat="x in names">
<td><label>{{ x.Field }}</label>
</td><td><input type="text" class="form-control" placeholder="{{x.Comment}}" required>
</td>
</tr>
</table>{{data}}
</form>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('dyf', function($scope, $http) {
$http.get("http://localhost:5000/gu")
.then(function (response) {$scope.names = response.data;console.log(response.data);});
$scope.data ={};
});
</script>
</body>
</html>
In AngularJs we use ng-model to bind inputs value to our controller, sample:
This full sample to figure out how to create a simple form, from array and how to send it as JSON to your API.
Note: On submit check your console, and see the objects value.
var app = angular.module("app", []);
app.controller("ctrl",
function ($scope) {
var options = [
{ name: "a" },
{ name: "b" },
{ name: "c" }
];
$scope.names = [
{ id: 1, field: "insert name", name: "name", placeholder: "your name is", value:null, type:"text" },
{ id: 2, field: "insert phone", name: "phone", placeholder: "your phone is", value: null, type: "tel" },
{ id: 3, field: "insert age", name: "age", placeholder: "your age is", value: null, type: "number", min: 0, max: 20 },
{ id: 4, field: "select country", name: "country", placeholder: "your country is", value: null, type: "select", options: options }
];
$scope.sendMe = function() {
console.log($scope.names);
}
});
<!DOCTYPE html>
<html ng-app="app" ng-controller="ctrl">
<head>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<form name="userFormOne" novalidate>
<table>
<tr class="form-group" ng-repeat="x in names">
<td>
<label>{{ x.field }}</label>
</td>
<td ng-if="x.type != 'select'">
<input type="{{x.type}}" min="{{x.min}}" max="{{x.max}}" ng-model="x.value" name="{{x.name}}" placeholder="{{x.placeholder}}" ng-required="true">
{{x.value}}
</td>
<td ng-if="x.type == 'select'">
<select ng-model="x.value" name="{{x.name}}" ng-options="item as item.name for item in x.options">
</select>
{{x.value}}
</td>
</tr>
</table>
<button ng-disabled="userFormOne.$invalid" ng-click="sendMe()">sendMe</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</body>
</html>
I have this html markup:
<div ng-repeat="prop in props" style="margin-bottom: 10px;">
<label class="col-md-4 control-label">Property {{$index + 1}} ({{prop.AddressLine1}})</label><div class="col-md-8">
<select ng-model="prop.Grade" class="form-control" ng-options="opt.name for opt in propGradings track by opt.id"> <option ng-selected="{{option.id == prop.Grade}}" ng-repeat="option in propGradings" ng-value="{{option.id}}">{{option.name}}</option> </select>
</div>
</div>
This static array to fill in the dropdown:
$scope.propGradings = [{ name: "1", id: 1 }, { name: "2", id: 2 }, { name: "3", id: 3 }, { name: "4", id: 4 }];
I'm able to load the items in the dropdown, but I'm not able to preselect the correct value based on the prop.Grade value.
HTML Output:
Any idea what am I doing wrong?
When selecting options from a dropdown, type matters for binding purposes. When using ng-options, you can use as to bind something to the model as a non-string value. In your case, you may want to bind to the integer value of the id.
Syntax: select as label for value in array
> select: The value that gets bound to ng-model
> label: What value visibly shows up in the dropdown
> value: Current item in array
> array: Data source for generating the options
Example of binding to an integer value:
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope) {
$scope.props = [{Grade: 1}];
$scope.propGradings = [{ name: "1", id: 1 }, { name: "2", id: 2 }, { name: "3", id: 3 }, { name: "4", id: 4 }];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
Binding with an integer value:
<div ng-repeat="prop in props" style="margin-bottom: 10px;">
<label class="col-md-4 control-label">Property {{$index + 1}} ({{prop.AddressLine1}})</label>
<div class="col-md-8">
<select ng-model="prop.Grade" class="form-control" ng-options="opt.id as opt.name for opt in propGradings">
<option ng-selected="{{option.id == prop.Grade}}" ng-repeat="option in propGradings" ng-value="{{option.id}}">{{option.name}}</option>
</select>
</div>
</div>
</div>
Example of binding to a string value:
var app = angular.module("myApp", []);
app.controller("myCtrl", function ($scope) {
$scope.props = [{Grade: "1"}];
$scope.propGradings = [{ name: "1", id: 1 }, { name: "2", id: 2 }, { name: "3", id: 3 }, { name: "4", id: 4 }];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
Binding with a string value:
<div ng-repeat="prop in props" style="margin-bottom: 10px;">
<label class="col-md-4 control-label">Property {{$index + 1}} ({{prop.AddressLine1}})</label>
<div class="col-md-8">
<select ng-model="prop.Grade" class="form-control" ng-options="opt.name as opt.name for opt in propGradings">
<option ng-selected="{{option.id == prop.Grade}}" ng-repeat="option in propGradings" ng-value="{{option.id}}">{{option.name}}</option>
</select>
</div>
</div>
</div>
I'm trying to change which property I'm filtering by assigning the property name to a variable, but it's not working. Is there a way to accomplish this without writing my own filter? codepen
<div ng-app="app" ng-controller="main as m">
<input ng-model="keyword"/>
<p>Property: {{m.property}}</p> <!-- resolves to 'name' -->
<!-- does not work-->
<div ng-repeat="o in m.objects | filter:{m.property:keyword}">
{{o.name}}
</div>
<hr/>
<!-- works-->
<div ng-repeat="o in m.objects | filter:{name:keyword}">
{{o.name}}
</div>
</div>
If I understand your question right, I think this is what you are looking for.
Relevant code:
HTML:
<select ng-model="property" ng-change="clearSearch()">
<option>name</option>
<option>age</option>
<option>city</option>
</select>
<input ng-model="search[property]" />
<div class="box">
<div class="item" ng-repeat="item in data | filter:search">
{{item.name}} | {{item.age}} | {{item.city}}
</div>
</div>
Javascript:
var app = angular.module("myapp", []);
app.controller("main", function($scope){
$scope.search = {};
$scope.clearSearch = function(){
$scope.search.name = "";
$scope.search.age = "";
$scope.search.city = "";
}
$scope.property = "name";
$scope.data = [
{
name: "Robert",
age: 23,
city: "Orem"
},
{
name: "Alice",
age: 44,
city: "Nephi"
},
{
name: "Susan",
age: 12,
city: "Odgen"
},
{
name: "Henry",
age: 63,
city: "South Jordan"
},
{
name: "Frank",
age: 35,
city: "Provo"
},
{
name: "Albert",
age: 32,
city: "Payson"
},
];
});
In short, <div ng-repeat="o in m.objects | filter:{m.property:keyword}"> {m.property:keyword} is not a correct expression
Have you tried filter without the "m." in "m.property"?
<div ng-repeat="o in m.objects | filter:{property:keyword}">
I need to show current location storage or current employee wheres the inventory is at the moment
<select class=" form-control" ng-model="location.name">
<option value="">Choose Location</option>
<optgroup label="Locations">
<option value="{{location.resource_uri}}" ng-repeat="location in locations">{{location.name}}</option>
</optgroup>
<optgroup label="Holder">
<option value="{{user.resource_uri}}" ng-repeat="user in users">{{user.first_name + ' ' + user.last_name}}</option>
</optgroup>
</select>
Can I put in ng-model two values, so if location is not null, i get current Location, if the location is null , i get employee name selected.
Take a look at this
Working Demo
html
<div class="form-control" ng-app="main" ng-controller="Controller">
<select ng-model="category">
<optgroup ng-repeat="category in categories" label="{{ category.name }}">
<option ng-repeat="subCat in category.items">
<span ng-switch="category.name">
<span ng-switch-when="Location">
{{ subCat.name }}
</span>
<span ng-switch-when="Holder">
{{subCat.first_name+" "+subCat.last_name}}
</span>
</span>
</option>
</optgroup>
</select>
{{category}}
</div>
script
var main = angular.module('main', []);
// Main Controller
main.controller('Controller', function ($scope) {
$scope.categories = [{
id: 5,
name: "Locations",
items: [{
resource_uri: 'ABC',
name: "ABC-Name"
}, {
resource_uri: 'XYZ',
name: "XYZ-Name"
}, {
resource_uri: 'LMN',
name: "LMN-Name"
}, {
resource_uri: 'PQR',
name: "PQR-Name"
}]
}, {
id: 17,
name: "Holder",
items: [{
first_name: 'Manu',
last_name: 'Mathew'
}, {
first_name: 'Sunny',
last_name: 'Mathew'
}, {
first_name: 'Jacob',
last_name: 'Mathew'
}, {
first_name: 'Vijay',
last_name: 'Mathew'
}]
}];
});