Hi I am new to Angular JS.
I have one HTML file which has one dropdown and one textarea. Text area value will be updated based on selected dropdown value. Note here: textarea won't display the same value which is selected by user in dropdown. It will display some other value based on dropdown's value.
Below is my HTML code snippet. Dropdown's value are coming from backend which I got after making rest call in my controller:
<select name="functionality" id="functionality" ng-model="selectedFunctionality">
<option ng-repeat="functionality in functionalities.menuDetailsList.menuDetails" value="{{functionality.menuName}}">{{functionality.menuName}}</option>
</select>
<textarea id="scode" class="form-control" ng-model="selectedFunctionality"></textarea>
Response which I am getting from backend is like this in XML format:
<menuDetailsList>
<menuDetails>
<menuName>FIRST</menuName>
<taskList>
<task>HYNN911</task>
<task>HXTELE</task>
<task>HXBTBCT</task>
</taskList>
</menuDetails>
<menuDetails>
<menuName>SECOND</menuName>
<taskList>
<task>1234</task>
<task>abcd</task>
<task>efghi</task>
</taskList>
</menuDetails>
<menuDetailsList>
In dropdownlist, I am displaying "menuName" as you can see in XML response. While in textarea I need to display corresponding tasklist.I have used "ng-model" in my HTML code, but that gives the value of selected menu. But I need to get corresponding tasks value. How can we do this. Please help.
I converted your xml into a json object but the rest is same. Using $filter you can achieve it. Here how you can do it. First you have to dependency inject $filter then start using it. Since you have multiple taks for each menuName so i displayed all of them.
// Code goes here
var app = angular.module('myApp', []);
app.controller('MainController', ['$scope','$filter', function ($scope, $filter) {
$scope.msg = "Hello";
$scope.menuDetailsList = [
{
"menuName": "FIRST",
"taskList": {
"task": [
"HYNN911",
"HXTELE",
"HXBTBCT"
]
}
},
{
"menuName": "SECOND",
"taskList": {
"task": [
"1234",
"abcd",
"efghi"
]
}
}
];
$scope.$watch('selectedFunctionality', function (newV, oldV) {
if (newV != oldV) {
if(angular.isDefined($scope.menuDetailsList)) {
var matchedMenu = $filter('filter')($scope.menuDetailsList, {menuName: $scope.selectedFunctionality});
debugger;
if (matchedMenu.length !=0 ) {
$scope.tasks = matchedMenu[0].taskList.task;
}
}
}
});
}]);
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body class="container" ng-controller="MainController" style="margin-top:20px;">
<div class="row">
<label for="functionality">Select an item</label>
<select name="functionality" id="functionality" ng-model="selectedFunctionality">
<option ng-repeat="functionality in menuDetailsList" value="{{functionality.menuName}}">{{functionality.menuName}}</option>
</select>
</div>
<br />
<div ng-repeat="task in tasks">
<textarea id="scode" class="form-control" ng-model="task"></textarea>
<br />
</div>
<script data-require="jquery#2.2.4" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script data-require="bootstrap#3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script data-require="angular.js#1.4.9" data-semver="1.4.9" src="https://code.angularjs.org/1.4.12/angular.js"></script>
<script src="script.js"></script>
</body>
</html>
Related
I am working on an app where I am facing this similar issue. I am dynamically creating select boxes based on API response. I dont understand how to bind these values in controller. Code for reference is
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
// how to get values of input boxes here
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model= "What_Should_Go_Here" ng-repeat="x in [10,11,22,33]">
<option>aaa</option>
<option>bbb</option>
<option>ccc</option>
</select>
{{What_Should_Go_Here}}
</div>
Initialize an empty object selected = {}
Then, loop the select boxes using ng-repeat, and inside each select box, use ng-options to get the options for the select.
Now, for each selected value from every select, ng-model="selected[y]" pushes the current select value into selected object with the key of select tag.
So, after selecting all the selects, the selected object looks loke,
{"1":11,"2":10,"3":22,"4":22}
Please run the below Code
<!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="myCtrl">
<select ng-model="selected[y]" ng-options="x for x in data" ng-repeat="y in selects" ng-change="selectedFunc(y)">
</select>
<br><br>
Selected Values: {{selected}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.selected = {};
$scope.selects = [1,2,3,4]
$scope.data = [10,11,22,33]
$scope.selectedFunc = function(y)
{
alert($scope.selected[y])
}
});
</script>
</body>
</html>
Here is a working DEMO
use a select box with ng-change method and pass the model value to that change function like below.....so that you can access the selected item in js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.array=[10,11,22,33];//assuem it as your db result
$scope.fix=function(val){
console.log(val);
}
});
<!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.12/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<select ng-model= "x" ng-options="x as x for x in array" ng-change="fix(x)"</select>
{{x}}
</body>
</html>
<select class="form-control"
id="projects"
ng-model="parent_id"
ng-options="project.id as project.groupingName for project in projects">
</select>
There is a project that has a gid that matches the parent_id, but it still doesn't come as selected by default. To prove it, I did:
<div ng-repeat="project in projects" ng-show="project.gid === parent_id">
{{ project }}
</div>
I see there's a gap in your code for parent_id and project id. I wrote some code for your requirement. If I understand correctly, you want to display the project if ID of that project equals parent_id. I've update ng-options for you correctly as they should track by "id" of the project.
Are you looking for something like http://codepen.io/aechannaveen/pen/NABbXq ?
<html ng-app="myApp">
<head>
<title>
My Angular App
</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js">
</script>
</link>
</head>
<body class="container" ng-controller="InputCtrl">
<select class="form-control" id="projects" ng-model="project" ng-options="project as project.groupingName for project in projects track by project.id">
</select>
<div ng-show="project.id === parent_id">
Project Selected :{{ project.groupingName }}
</div>
</body>
</html>
And
angular.module('myApp', []).controller('InputCtrl', ['$scope',function($scope) {
$scope.parent_id = 2;
$scope.projects = [
{
"groupingName": "ABC",
"id": 1
},
{
"groupingName": "CDE",
"id": 2
} ];
}]);
I have the following select:
<select class="form-control"
onchange="User_Changed_Language()"
id="HeaderLanguageSelection"
style="cursor:pointer;width:100%;height:30px;margin:0;padding:0"
title="{{Labels.Change_Language_Tooltip}}">
<option ng-repeat="One_Language in Languages_List"
value="{{One_Language.Code}}"
ng-selected="One_Language.Code == current_Language">
{{One_Language.Name}}
</option>
</select>
Now, current_Language is a $rootScope variable with a value (e.g. "EN"). I want the select element to display the selected value instead of the very first. What am I doing wrong?
One more note: I know that I could use ng-click, but I don't think this is the source of the issue.
Thanks.
Check this snippet:
var app = angular.module('app', []);
app.controller('MainCtrl', function($scope, $rootScope) {
$scope.Labels = {Change_Language_Tooltip: "change lang"};
$scope.Languages_List = [
{ name: 'English', Code: 'en' },
{ name: 'Espanol', Code: 'es' },
{ name: 'Italian', Code: 'it' }];
$rootScope.current_Language = $scope.Languages_List[1];
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8" />
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>selected item is : {{current_Language}}</p>
<select class="form-control"
onchange="User_Changed_Language()"
id="HeaderLanguageSelection"
style="cursor:pointer;width:100%;height:30px;margin:0;padding:0"
title="{{Labels.Change_Language_Tooltip}}"
ng-options="item.name for item in Languages_List track by item.Code"
ng-model="current_Language">
</select>
</body>
</html>
PS: the selected item (default or initial) must be one element of the items used in the ngOptions list
im using this plunker autocomplete
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://code.angularjs.org/1.2.19/angular.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/angular.bootstrap/0.11.0/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body onload='init()'>
<div id='container' ng-controller='TypeaheadCtrl'>
<h3 class="ng-binding">Item Name: {{item.name}}</h3>
<h3 class="ng-binding">Item Id: ({{item.id}})</h3>
<input id='itemInput' type="text" ng-model="item" placeholder="Item Name" typeahead="item as item.name for item in items | filter:$viewValue" class="form-control">
</div>
</body>
</html>
in my project , i face problem when i try to edit i fill the input automaticly so the problem is i just get text and all the object in ng-model
for example in the link above if i copy the world Chicken and paste it in input it will not give me the object it will be just text ,
if i insert the world c and choice the option Chicken i will get in ng-model the object (that contain id and name)
Look at working example,
http://plnkr.co/edit/Z930HmH83KIENuEjWhx3?p=preview
I have change your code a bit and made it angular code rather than java script code.
I hope it will work. I have taken your json in .json file and using $http service made call to that json.
var app = angular.module('myApp', ['ui.bootstrap']);
app.factory('autoComplete',function($http){
return{
load:function(){
$http.get('data.json').success(function (data){
sessionStorage.setItem( 'items', JSON.stringify(data) );
})
}
}
})
app.controller('TypeaheadCtrl',function($scope,$http,autoComplete){
$scope.selected = undefined;
$scope.items = JSON.parse(sessionStorage.getItem('items'));
});
I hope that little modification to this solution would take you to your required solution.
HERE is the working plunker PRESS STOP THEN RUN, BUG IN PLUNKER : http://plnkr.co/edit/QGqDjhzcFVNSHxA2hmHM?p=preview
It should be ng-bind not ng-binding and it shouldn't be class = ng-binding (angular directives are not css classes) it should be Item name: <h3 ng-bind="item.name"></h3>. Here's an example from the angularJS website:
<script>
angular.module('bindExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.name = 'Whirled';
}]);
</script>
<div ng-controller="ExampleController">
<label>Enter name: <input type="text" ng-model="name"></label><br>
Hello <span ng-bind="name"></span>!
</div>
and here's your code edited:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://code.angularjs.org/1.2.19/angular.min.js"> </script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/angular.bootstrap/0.11.0/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body onload='init()'>
<div id='container' ng-controller='TypeaheadCtrl'>
Item name: <h3 ng-bind="item.name"></h3>
Item ID: <h3 ng-bind="item.id"></h3>
<input id='itemInput' type="text" ng-model="item" placeholder="Item Name" typeahead="item as item.name for item in items | filter:$viewValue" class="form-control">
</div>
I have a simple JavaScript object that looks like this:
$scope.obj = { "'Architect'": ["asdf","d","e","y"]};
I'd like to show the values of 'Architect' in a select box. However, the single quotes are throwing me off when trying to do the ng-repeat.
<select>
<option ng-repeat="row in obj['Architect']" value="{{row}}">{{row}}</option>
</select>
That does not populate the select box, it just shows an empty select box. I assume it is interpreting the single quotes as a string literal, but even if I add single quotes and escape them, it still doesn't work as expected. Am I missing something?
Here is a sample plunker:
escape the quotes How to properly escape quotes inside html attributes?
<option ng-repeat="row in obj["'Architect'"]" value="{{row}}">{{row}}</option>
http://plnkr.co/edit/6xUD3Zg0jxV05b41f2Gw?p=preview
why don't you use "ng-options" for select?
take a lock at this
AngularJs API: select
Here is the complete code for ng repeat with external json
HTML
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>datatable using jquery.datatable in angularjs</title>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container" ng-app="problemApp" data-ng-controller="validationCtrl">
<select>
<option ng-repeat="item in testdata" value="">{{item.name}}</option>
</select>
</div>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
index.js
var app=angular.module('problemApp', []);
app.controller('validationCtrl',function($scope,$http){
$http.get('http://localhost/Dtable_angular/ngrepeatdropdown/test.json').success(function (data) {
$scope.testdata = data;
console.log($scope.testdata)
})
$scope.dataTableOpt = {
//custom datatable options
// or load data through ajax call also
"aLengthMenu": [[10, 50, 100,-1], [10, 50, 100,'All']],
};
});
test.json
[{
"countryId": 1,
"name": "France - Mainland",
"desc": "some description"
},
{
"countryId": 2,
"name": "Gibraltar",
"desc": "some description"
},
{
"countryId": 3,
"name": "Malta",
"desc": "some description"
}
]