Having trouble figuring out this problem involving an Angular checkbox form generated from an API.
I can create a checkboxes but two problems: The checkedness of the boxes does not match the values in what's coming from the API, and when I click the checkboxes the name value changes from its default to "true" or "false." Have seen other similar questions but can't get this to work. Plunk here and source code below:
<!doctype html>
<html ng-app="checkTest">
<head>
<meta charset="utf-8">
<title>Angular Multiple Checkboxes</title>
<style>
label {display:block;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.js"></script>
<script type="text/javaScript">
var jsonObj = {"fruits":[
{
"name": "Apple",
"desc": "abcdefg",
"selected": "true",
"status": "Created"
},
{
"name": "Broccoli",
"desc": "abcdefg",
"selected": "true",
"status": "None"
},
{
"name": "Cucumber",
"desc": "abcdefg",
"selected": "false",
"status": "Created"
},
{
"name": "Daikon",
"desc": "abcdefg",
"selected": "false",
"status": "None"
}
]};
var fruitsObj = jsonObj.fruits;
</script>
</head>
<body>
<div ng-controller="MainCtrl">
<label ng-repeat="fruit in fruits">
<input type="checkbox" name="fruitSelect" ng-model="fruit.name" ng-value="{{fruit.name}}" ng-checked="fruit.selected"> {{fruit.name}}
</label>
<p>Services: {{fruits}}</p>
</div>
<script type="text/javaScript">
var app = angular.module('checkTest', []);
app.controller('MainCtrl', function($scope) {
$scope.fruits = fruitsObj;
});
</script>
</body>
</html>
Simply the booleans should be true or false only rather than string 'true' or 'false'
Additionally there is not need of ng-checked directive. You also need to use {{index}} in form field so that it will become an unique element of form like by doing serviceSelect-{{$index}}
Markup
<input
type="checkbox"
name="serviceSelect-{{$index}}"
ng-model="fruit.selected"
ng-value="{{fruit.name}}" />
Demo Plunkr
Checkbox for Angular is true or false. The code should be this:
<input type="checkbox" name="serviceSelect" ng-model="fruit.selected" ng-value="{{fruit.name}}" ng-checked="fruit.selected">
Related
Ng-Selected is not selecting the right option even comparison is right. I can see in the output the comparison is working exactly fine.
My actual question is that even after successful comparison (unlike other questions where Int and string comparison returns false). Why it is not selecting the option.
I can't use option for some other purpose. Secondly while copying into the snippet it has some error. That's why it is not working.
var app = angular.module("app", []);
app.controller("HelloController", function($scope) {
$scope.data = {
ExpertiseId: null,
userExperties = [{
id: 1,
ExpertyTitle: "Human Resource"
}, {
id: 2,
ExpertyTitle: "Account & Finance"
}, {
id: 3,
ExpertyTitle: "Information Technology"
}, {
id: 4,
ExpertyTitle: "Business Management"
}];
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>AngularJS</title>
</head>
<body ng-app="app">
<select name="ChooseExpertise" id="ChooseExpertise" class="form-control" ng-model="newAdmin.ExpertiseId" required>
<option style="display:none" value="">CHOOSE_EXPERTISE</option>
<option ng-selected="{{option.id.toString() == data.ExpertiseId.toString()}}" value="{{option.id.toString()}}" ng-repeat="option in data.userExperties">{{option.id.toString()==data.ExpertiseId.toString()}}---{{option.ExpertyTitle}}</option>
</select>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Thanks :) Please Help
There are couple of errors in your code.
The object notation is wrong
And you no where used ng-controller
Placed script files outside of html tag.
Also ng-selected syntax is wrong
I corrected them and updated the snippet.
var app = angular.module("app", []);
app.controller("HelloController", function($scope) {
$scope.data = {
ExpertiseId: 2,
userExperties : [{
id: 1,
ExpertyTitle: "Human Resource"
}, {
id: 2,
ExpertyTitle: "Account & Finance"
}, {
id: 3,
ExpertyTitle: "Information Technology"
}, {
id: 4,
ExpertyTitle: "Business Management"
}]
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
</head>
<body ng-app="app" >
<div ng-controller="HelloController">
<select name="ChooseExpertise" id="ChooseExpertise" class="form-control" ng-model="newAdmin.ExpertiseId" required>
<option ng-selected="option.id === data.ExpertiseId" ng-repeat="option in data.userExperties" value="{{option.id}}">{{option.id}}</option>
</select>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</html>
We have plenty of server-side data grid controls, would like to replace them w/ generic clientside Angular. But data is always placed outside of the grid. To find out the cause, I followed the official demo/tutorial, combine .js and .css into local.html, still the same result.enter image description here
Visual Studio 2015 w/ Update, NuGet installed ui-grid(v3.2.9 - 2016-09-21). Must be something missing or the demo has problem.
Here is local.html:
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="/Scripts/ui-grid.js"></script>
<script src="/Content/ui-grid.css"></script>
<style>
.grid { width: 500px; height: 250px;}
</style>
<script>
var app = angular.module('app', ['ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.myData = [
{
"firstName": "Cox",
"lastName": "Carney",
"company": "Enormo",
"employed": true
},
{
"firstName": "Lorraine",
"lastName": "Wise",
"company": "Comveyer",
"employed": false
},
{
"firstName": "Nancy",
"lastName": "Waters",
"company": "Fuelton",
"employed": false
}
];
}]);
</script>
</head>
<body>
<div ng-controller="MainCtrl">
<div id="grid1" ui-grid="{ data: myData }" class="grid"></div>
</div>
</body>
</html>
Stupid me, I was loading .css using tag.
So this line
<script src="/Content/ui-grid.css"></script>
should be this instead:
<link rel="stylesheet" type="text/css" href="/Content/ui-grid.css">
It's been working as expected.
I am trying to print some data from a JSON end point using AngularJS.
End point :- http://localhost:8081/api
JSON structure :-
{
"1": {
"venture": "XYZ Informatics",
"member": [
{
"name": "abcd",
"email": "abcd#gmail.com"
}
],
"message": "This is good day",
"isclicked": false
},
"2": {
"venture": "BBC Informatics",
"member": [
{
"name": "xyz",
"email": "xyz#gmail.com"
}
],
"message": "This is bad day",
"isclicked": false
}
}
I want to display the name of venture s in row. My expected output in row is :-
XYZ Informatics
BBC Informatics
My Code is :-
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
</style>
</head>
<body>
<div ng-app="MyApp" ng-controller="displayController">
<table style="width:100%">
<tr ng-repeat="data in datas">
<td>{{ data.venture }}</td>
</tr>
</table>
</div>
<script>
angular.module('MyApp', [])
.controller('displayController', function($scope, $http) {
var url = "http://localhost:8081/api";
$http.get(url).success(function (response) {
$scope.datas = response;
});
}
</script>
</body>
</html>
But the value is not displaying. Probably, I am missing to get into each array of JSON.
There is a syntax error on your script. Close the brackets for your controller.
<script>
angular.module('MyApp', [])
.controller('displayController', function($scope, $http) {
//changed to your local api
var url = "http://localhost:8081/api";
$http.get(url).success(function(response) {
$scope.datas = response;
});
});//this is the place where you miss out the closing bracket
</script>
Here is the working plnkr.
I have an Array of Objects in AngularJS which consists of:
EmployeeComments
ManagerComments
ParticipantsComments.
[{
"id": "1",
"title": "Question1",
"ManagerComment": "This was a Job Wel Done",
"EmployeeComment": "Wow I am Surprised",
"ParticipantArray": [{
"id": "1",
"comment": "Oh i Dont think So"
}, {
"id": "2",
"comment": "Oh i believe the same"
}
]
}, {
"id": "2",
"title": "Question 2",
"ManagerComment": "This was a Job Wel Done 1",
"EmployeeComment": "Wow I am Surprised 1",
"ParticipantArray": [{
"id": "1",
"comment": "Oh i Dont think So 1"
}
]
}];
I iterate through this object to get textarea with comments from Object.
I have to show Save/Edit buttons in front of each textarea to edit comments , update comments or add any new comments.
I am not sure how to do dat as i am looking for a this like object which just works on individual textarea rather than all the textarea fields. Any suggestions.
Here is an example plnkr showing how this can be done.
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.tableData = [{
"id": "1",
"title": "Question1",
"ManagerComment": "This was a Job Wel Done",
"EmployeeComment": "Wow I am Surprised",
"ParticipantArray": [{
"id": "1",
"comment": "Oh i Dont think So"
}, {
"id": "2",
"comment": "Oh i believe the same"
}
]
}, {
"id": "2",
"title": "Question 2",
"ManagerComment": "This was a Job Wel Done 1",
"EmployeeComment": "Wow I am Surprised 1",
"ParticipantArray": [{
"id": "1",
"comment": "Oh i Dont think So 1"
}
]
}];
$scope.tableDataCopy = angular.copy( $scope.tableData );
$scope.save = function() {
$scope.tableData = angular.copy( $scope.tableDataCopy );
}
});
Basically the controller just contains your data, together with a copy of it so that we do not write directly to the model (hence there would be no need for a save function).
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<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 src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="data in tableDataCopy">
Manager comment:
<textarea ng-disabled="!edit" ng-model="data.ManagerComment"></textarea>
<br>
Employee comment:
<textarea ng-disabled="!edit" ng-model="data.EmployeeComment"></textarea>
<div ng-repeat="participant in data.ParticipantArray">
Participant {{participant.id}}: <textarea ng-disabled="!edit" ng-model="participant.comment"></textarea>
</div>
<button ng-click="save()">Save</button><button ng-click="edit = !edit">Edit</button>
<br>
<br>
<br>
</div>
{{tableData}}
<br>
<br>
{{tableDataCopy}}
</body>
</html>
This is just a very simple example of how to use repeaters, data binding and click events.
I am sure that you will be able to change the logic according to your specific needs from this example.
Edit: Updated the plnkr with individual controls
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<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 src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="data in tableDataCopy track by $index">
Manager comment:
<textarea ng-disabled="!editManager" ng-model="data.ManagerComment"></textarea>
<button ng-click="tableData[$index].ManagerComment = data.ManagerComment">Save</button><button ng-click="editManager = !editManager">Edit</button>
<br>
Employee comment:
<textarea ng-disabled="!editEmployee" ng-model="data.EmployeeComment"></textarea>
<button ng-click="tableData[$index].EmployeeComment = data.EmployeeComment">Save</button><button ng-click="editEmployee = !editEmployee">Edit</button>
<div ng-repeat="participant in data.ParticipantArray">
Participant {{participant.id}}: <textarea ng-disabled="!participant.edit" ng-model="participant.comment"></textarea>
<button ng-click="tableData[$parent.$index].ParticipantArray[$index].comment = participant.comment">Save</button><button ng-click="participant.edit = !participant.edit">Edit</button>
</div>
<br>
<br>
<br>
</div>
{{tableData}}
<br>
<br>
{{tableDataCopy}}
</body>
</html>
Use ng-repeat to iterate through your object . assign each comment to a model in text area . So when ever you are going to edit or update that comment that value would be reflected in your object using two way binding of angular .
I'm trying to render the contents of a scope variable in AngularJS. This is my code.
<!doctype html>
<html ng-app="myApp">
<head>
<title> AngularJS Tabs</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<style>
.box {
margin : 5px;
display : inline-block;
width: 150px;
height: 250px;
background-color: grey;
text-align:center;
vertical-align: top;
}
</style>
</head>
<body>
<div ng-controller="myCtrl">
<div class='box' ng-repeat="product in Products">
<br>
<b>{{product.BrandName}}</b>
<br>
{{product.ProductName}}
<br><br>
<img src="http://localhost/{{ product.ProductImagePath }}" alt="" border=3 height=75 width=75></img>
<br>
<br>
<select ng-init="SelectedVariant = product.Variants[0]" ng-model="SelectedVariant">
<option ng-selected="SelectedVariant"
ng-repeat="variant in product.Variants"
value="{{variant.VariantID}}">
{{variant.VariantName}}
</option>
</select>
<br>
<strike> {{SelectedVariant.MRP}} </strike> {{SelectedVariant.SellPrice}}
<br>
<button> Add to Cart </button>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.Products = [
{
"ProductID": "12",
"ProductName": "Green Detergent Bar",
"ProductImagePath": "/images/12.png",
"SubCategoryID": "1",
"SubCategoryName": "DetergentBar",
"BrandID": "1",
"BrandName": "Wheel",
"Variants": [
{
"VariantID": "1",
"VariantName": "500GM",
"VariantImagePath": "/images/12_1.png",
"MRP": "20.00",
"SellPrice": "19.50"
},
{
"VariantID": "2",
"VariantName": "1KG",
"VariantImagePath": "/images/12_2.png",
"MRP": "40.00",
"SellPrice": "38.00"
}
]
},
{
"ProductID": "13",
"ProductName": "Amla Hair Oil",
"ProductImagePath": "/images/13.png",
"SubCategoryID": "2",
"SubCategoryName": "HairOil",
"BrandID": "2",
"BrandName": "Dabur",
"Variants": [
{
"VariantID": "3",
"VariantName": "100ML",
"VariantImagePath": "/images/13_3.png",
"MRP": "30.00",
"SellPrice": "29.50"
},
{
"VariantID": "4",
"VariantName": "200ML",
"VariantImagePath": "/images/13_4.png",
"MRP": "60.00",
"SellPrice": "58.00"
}
]
}
];
});
</script>
</body>
</html>
There are three problems i am seeing with above code.
Initially select box is showing second option as selected and also 1 option as blank entry. Though blank entry disappears as soon as i chooses any option in the list. But i want first option of select box to be selelected by default and there is no blank option in list when page loads.
When i'm selecting new option in the list, its price is not getting change. How to do that?
At the time of loading option is selected second one, but price of first is displaying. How to fix this bug?
Any help will be highly appreciated.
Use ng-options which will bind the object to the value.
<select ng-init="SelectedVariant = product.Variants[0]" ng-model="SelectedVariant" ng-options="variant.VariantName for variant in product.Variants"></select>
DEMO