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>
Related
I hope someone can help me figure out my issue. I am trying to fill a comboBox with some array data but I am getting an empty comboBox as if nothing it returns back to be displayed, I know I am closed but can find what I am missing.
Thank you in advance
angular.module('demoApp', [])
.controller('simpleController', ['$scope', function($scope) {
$scope.employeeCollections = [
{ id:'1',name: 'Dave Jones', title: 'IT Administrator' },
{ id:'2',name: 'Daniel Thomas', title: 'Software Developer' },
{ id:'3',name: 'Sam Alexandrovic', title: 'Senior Software Developer' }
];
$scope.selectedEmployee = $scope.employeeCollections[0].name;
}]);
<html ng-app="demoApp">
<head>
<script src="Scripts/angular.min.js"></script>
</head>
<body>
<h1> Employee Information </h1>
<div class="container" ng-controller="simpleController">
<select ng-model="selectedEmployee" ng-options="employee as employee.name for employee in employeeCollections"></select>
</div>
</body>
</html>
it seems your angularjs reference is wrong. please check the path. see below snippet with CDN.
<html ng-app="demoApp">
<body>
<h1> Employee Information </h1>
<div class="container" ng-controller="simpleController">
<select ng-model="selectedEmployee" ng-options="employee as employee.name for employee in employeeCollections"></select>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
<script>
angular.module('demoApp', [])
.controller('simpleController',['$scope', function ($scope) {
$scope.employeeCollections = [
{ id:'1',name: 'Dave Jones', title: 'IT Administrator' },
{ id:'2',name: 'Daniel Thomas', title: 'Software Developer' },
{ id:'3',name: 'Sam Alexandrovic', title: 'Senior Software Developer' }
];
$scope.selectedEmployee = $scope.employeeCollections[0].name;
}
]
);
</script>
</html>
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 .
here is my code.. where I made problem.. please help me out.. I am trying to create a controller what fill fetch data and show in html li part.. but I don't understand where is the error.. I have tried with adding jQuery min library and without it.. but failure.. kindly help me to short out this problem..
<html data-ng-app="myApp">
<head>
<title>First Angular application</title>
</head>
<body>
checkNames:
<input type="text" data-ng-model="namek">
<div class="container" data-ng-controller="SimpleController">
<ul>
<li data-ng-repeat="cast in castomers | filter:namek">{{cast.name|uppercase}} - {{cast.city}}</li>
</ul>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/angular.min.js"></script>
<script>
function SimpleController($scope) {
$scope.castomers = [{ name: 'krishnendu sarkar', city: 'kolkata' },
{ name: 'chanchal sarkar', city: 'bangalore' },
{ name: 'nilava chakraborty', city: 'pune' }]
};
</script>
</body>
</html>
thanks in advance..
You should create and angular module first with name myApp then you could have data-ng-controller="SimpleController" to be move it over body tag so that the namek input field included inside the SimpleController controller context.
Add ng-app="myApp" on the body tag. so that angular module gets initialize on page.
Markup
<body data-ng-controller="SimpleController">
checkNames:
<input type="text" data-ng-model="namek">
<div class="container">
<ul>
<li data-ng-repeat="cast in castomers | filter:namek">{{cast.name|uppercase}} - {{cast.city}}</li>
</ul>
</div>
</div>
Controller
angular.module('myApp', []).controller('SimpleController', SimpleController);
function SimpleController($scope) {
$scope.castomers = [{
name: 'krishnendu sarkar',
city: 'kolkata'
}, {
name: 'chanchal sarkar',
city: 'bangalore'
}, {
name: 'nilava chakraborty',
city: 'pune'
}]
};
Demo PLunkr
please see this link here to see the whole code.
You should create angular module "myApp" which define the application then controller inside it.
Here is a simple form which uses AngularJS.
In FireFox (30.0) and IE (11.0.9600.17207), if I choose "Yes, No, No" in drop-down boxed, is shows "true, false, false" as I expect.
In Chrome (36.0.1985.125 m) it shows "true, true, true".
Does anybody have any ideas what I'm doing wrong?
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" ng-app="testApp">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js" type="text/javascript"></script>
<script type="text/javascript">
var testApp = angular.module( 'testApp', [] );
testApp.controller( 'Ctl1', [
'$scope',
function ( $scope ) {
$scope.questions = [{ id: 1, value: null }, { id: 2, value: null }, { id: 3, value: null }];
$scope.submit = function () {
var results = [];
angular.forEach( $scope.questions, function ( v, k ) { results.push( v.value ); } );
console.log( results );
$scope.results = results;
}
}] );
</script>
</head>
<body>
<div ng-controller="Ctl1">
<h1>Page 1</h1>
<form ng-submit="submit()">
<p ng-repeat="item in questions">
<select ng-model="item.value">
<option value="true">Yes</option>
<option value="false">No</option>
</select>
</p>
<p>
<button type="submit">Submit</button>
</p>
</form>
<h1>Page 2</h1>
<p ng-repeat="item in results track by $index">{{ item }}</p>
</div>
</body>
</html>
Try to look at it in a binding sense and it's much easier to see what's going on.
Fiddle
{{questions}}
I was able to simplify the example and found a workaround.
Here is the simplified code:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" ng-app="testApp">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js" type="text/javascript"></script>
<script type="text/javascript">
var testApp = angular.module( 'testApp', [] );
testApp.controller( 'Ctl1', [
'$scope',
function ( $scope ) {
$scope.value = null;
}] );
</script>
</head>
<body>
<div ng-controller="Ctl1">
<p>Value: {{ value }}</p>
<select ng-model="value">
<option value="true">Yes</option>
<option value="false">No</option>
</select>
</div>
</body>
</html>
Steps to reproduce:
Open the page in Google Chrome
Navigate to the drop-down list using keyboard
Press "arrow down" twice
Live demo: http://jsfiddle.net/QBjkB/
To fix it I’ve initialized "value" with empty string:
function ( $scope ) {
$scope.value = '';
}
And added the option with empty value to a drop-down list:
<select ng-model="value">
<option value="">---</option>
<option value="true">Yes</option>
<option value="false">No</option>
</select>
Thank you guys for your ideas!
I am trying out the basics of AngularJS first time. I am trying out ng-repeat first time. However it is not working.
Here is a non working jsfiddle.
I have written the code in single standalone HTML file as follows and also angular.js file resides in the same directory
<html ng-app>
<head>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript">
var users = [
{
name:"Mahesh",
description:"A geek",
age:"22"
},
{
name:"Ganesh",
description:"A nerd",
age:"25"
},
{
name:"Ramesh",
description:"A noob",
age:"27"
},
{
name:"Ketan",
description:"A psychopath",
age:"26"
},
{
name:"Niraj",
description:"Intellectual badass",
age:"29"
}
];
</script>
</head>
<body>
<div>
<div data-ng-repeat="user in users">
<h2>{{user.name}}</h2>
<div>{{user.description}}</div>
</div>
</div>
</body>
</html>
users must refer to a property that is accessible on the current scope. Scopes are AngularJS way of tying data from and to HTML. This is explained further in the "Model and Controller" chapter of the second tutorial page. See a working version of your Fiddle here.
HTH!
you have not define the controller such as
myapp.controller("AppController",function($scope){
$scope.users=[
{
name:"Mahesh",
description:"A geek"
},
];
});
/// than you can call controller to the view such as below code :
<body ng-controller="AppController">
<div><div data-ng-repeat="user in users">
<h2>{{user.name}}</h2>
<div>{{user.description}}</div>
</div>
</div>
</body>
Live Example you can access by this link : http://jsfiddle.net/9yHjj/
Your code should have been like this....
<html ng-app="app">
<head>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript">
var app = angular.module("app",[]).controller(AppController,["$scope",function($scope){
$scope.users=[
{
name:"Mahesh",
description:"A geek",
age:"22"
},
{
name:"Ganesh",
description:"A nerd",
age:"25"
},
{
name:"Ramesh",
description:"A noob",
age:"27"
},
{
name:"Ketan",
description:"A psychopath",
age:"26"
},
{
name:"Niraj",
description:"Intellectual badass",
age:"29"
}
];
}])
</script>
</head>
<body ng-controller="AppController">
<div>
<div data-ng-repeat="user in users">
<h2>{{user.name}}</h2>
<div>{{user.description}}</div>
</div>
</div>
</body>
</html>
<html ng-app="myapp1">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script type="text/javascript">
var myapp = angular.module("myapp1",[]);
myapp.controller("AppController",function($scope){
$scope.users=[
{
name:"Mahesh",
description:"A geek",
age:"22"
},
{
name:"Ganesh",
description:"A nerd",
age:"25"
},
{
name:"Ramesh",
description:"A noob",
age:"27"
},
{
name:"Ketan",
description:"A psychopath",
age:"26"
},
{
name:"Niraj",
description:"Intellectual badass",
age:"29"
}
];
});
</script>
</head>
<body ng-controller="AppController">
<div>
<div data-ng-repeat="user in users">
<h2 ng-bind="user.name"></h2>
<div>{{user.description}}</div>
</div>
</div>
</body>
</html>
This code should work