<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
} ];
}]);
Related
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>
I have a small ngRoute example I am trying that to use multiple applications and controllers with. The first app/controller is for the main page, while the second set of app/controller is for the html that ngRoute loads up after pressing a button. However, it doesn't seem to be working. Code below:
Main Module
var app = angular.module("MainModule", ["ngRoute"]);
Main Controller
app.controller("MainController", function ($scope) {
});
app.config(function ($routeProvider) {
$routeProvider
.when('/customers', {
templateUrl: "customers.html",
controller: "CustomerController"
})
});
Customer Module
var CustomerModule = angular.module("CustomerModule", []);
Customer Controller
CustomerModule.controller("CustomerController", function ($scope) {
$scope.Test = "Hey";
$scope.CustomerArray = [
{ "firstName" : "John", "lastName" : "Williams", "Occupation" : "Fireman" },
{ "firstName" : "Louis", "lastName" : "Abrams", "Occupation" : "Policeman" }
]
});
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="scripts/MainModule.js"></script>
<script src="scripts/MainController.js"></script>
<link rel="stylesheet" type="text/css" href="MyCSS.css">
</head>
<body>
<div ng-app="MainModule">
<div id="TopDiv">Main Module</div>
<input type="button" value="Load Customers" />
<div ng-view></div>
</div>
</body>
</html>
customers.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="scripts/CustomerModule.js"></script>
<script src="scripts/CustomerController.js"></script>
</head>
<body>
<div ng-app="CustomerModule" ng-controller="CustomerController">
{{Test}}
<ul>
<li ng-repeat="x in CustomerArray">{{x.firstName x.lastName x.Occupation}}</li>
</ul>
</div>
</body>
</html>
Long bits of code there, but hopefully simple code. The output when I press the "Load Customer" button is literally {{Test}} with no array data to follow.
I am just now learning angular, so any help with this issue I would appreciate. I am just doing this for fun, to try to learn. So I suppose the issue is not pressing. :) Thanks!
I wrote out a working example using the code from the question as a base. There are quite a few adjustments that were made, so I will list each piece with a bit of explanation.
It is not necessary for each "page" to have it's own module. However, it is not a bad practice. To support the design you have here of one module for each view, I made the following changes:
Include the CustomerModule as a dependency in the MainModule (MainModule.js):
var app = angular.module("MainModule", ["ngRoute", "CustomerModule"]);
Load ALL scripts in the index.html:
<script src="scripts/MainModule.js"></script>
<script src="scripts/MainController.js"></script>
<script src="scripts/CustomerModule.js"></script>
<script src="scripts/CustomerController.js"></script>
With these changes, the $routeProvider is able to locate the CustomerController and instantiate it during a route change. The customers.html now does not have to create a controller, and can be stripped down to a complete partial. Also, the expression used in customers.html needed to be changed, and broken down into individual expressions for each property.
The final customers.html:
{{Test}}
<ul>
<li ng-repeat="x in CustomerArray">{{x.firstName}} {{x.lastName}} {{x.Occupation}}</li>
</ul>
Complete working sample on plnkr.co: http://plnkr.co/edit/EjwW9Fsc2DPhBejUETwB?p=preview
I'm not sure, but the problem is in your MainModule. It should be like this or so:
var app = angular.module("MainModule", ["ngRoute"]);
When you calling angular.module with only one parameter - it's only trying get module, not create.
And customers.html should only contains parts of you html, not full:
Full customers.html
{{Test}}
<ul>
<li ng-repeat="x in CustomerArray">{{ x.firstName }} {{ x.lastName }} {{ x.Occupation }}</li>
</ul>
And add move customer js files to index.html:
<script src="scripts/MainModule.js"></script>
<script src="scripts/MainController.js"></script>
<script src="scripts/CustomerModule.js"></script>
<script src="scripts/CustomerController.js"></script>
<link rel="stylesheet" type="text/css" href="MyCSS.css">
Hope, it helps.
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 just began to learn AngularJS by following this youtube video. First part is okay except when it comes to the controller part.
My code is as below (it's the same as in the video)
<html data-ng-app="">
<head>
<script src="angular.min.js"></script>
<script>
function SimpleController($scope) {
$scope.customers = [{
name: 'Kamal',
city: 'York'
}, {
name: 'Sunil',
city: 'DC'
}, {
name: 'Malith',
city: 'Gotham'
}];
}
</script>
</head>
<body>
<div data-ng-controller="SimpleController">Name :
<input type="text" data-ng-model="name" />
</br>
<ul>
<li data-ng-repeat="cust in customers | filter :name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city}}</li>
</ul>
</div>
</body>
</html>
when I add data-ng-controller="SimpleController" it will not working and give the following error in the console.
Then when I try to post the question in the SO , I tried it in JSfiddle. I added Angular.js and selected onLoad and not working. But when I selected no wrap - in <head> it works fine.
But I can't do that in my local machine so the problem remains as it is.
Can anybody point me to the correct path ?
You need to initialize app:
var app = angular.module("myApp", []);
<div ng-app="myApp" ng-controller="SimpleController">
<!-- ^^^^^ -->
Demo: http://jsfiddle.net/xy23ybzp/2/
Docs: https://docs.angularjs.org/guide/bootstrap
Check Manual Initialization Section in Docs
After getting help from the answers listed here for this question. I got it working. Below is the working code.
<html >
<head>
<script src = "angular.min.js" ></script>
<script>
var app = angular.module("myApp", []);
app.controller("SimpleController",function($scope){
$scope.customers = [
{name :'Kamal',city : 'York'},
{name : 'Sunil',city:'DC'},
{name : 'Malith',city:'Gotham'}
];
});
</script>
</head>
<body >
<div ng-app="myApp" data-ng-controller="SimpleController">
Name :
<input type="text" data-ng-model="name" />
</br>
<ul>
<li data-ng-repeat="cust in customers | filter :name | orderBy:'city'">{{cust.name | uppercase}} - {{cust.city}}</li>
</ul>
</div>
</body>
</html>
In step 3 of the AngularJS Tutorial AngularJS tutorial the the example suggests adding another e2e test:
it('should display the current filter value within an element with id "status"',
function() {
expect(element('#status').text()).toMatch(/Current filter: \s*$/);
input('query').enter('nexus');
expect(element('#status').text()).toMatch(/Current filter: nexus\s*$/);
//alternative version of the last assertion that tests just the value of the binding
using('#status').expect(binding('query')).toBe('nexus');
});
The test initially fails, adding the following to the page is supposed to make it pass. Having added it my page is like this:
<!doctype html>
<html lang="en" ng-app ng-controller="PhoneListCtrl">
<head>
<meta charset="utf-8">
<title ng-bind-template="Google Phone Gallery: {{query}}">Google Phone Gallery</title>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/bootstrap.css">
<script src="lib/angular/angular.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-controller="PhoneListCtrl">
<div class="container-fluid">
<div class="row-fluid">
<div class="span2">
<!--Sidebar content-->
Search:
<input ng-model="query">
<div id="status">
Current filter: {{query}}
</div>
</div>
<div class="span10">
<!--Body content-->
<ul class="phones">
<li ng-repeat="phone in phones | filter:query">
{{phone.name}}
<p>
{{phone.snippet}}
</p>
</li>
</ul>
</div>
</div>
</div>
</body>
The final assertation fails though: `
using('#status').expect(binding('query')).toBe('nexus');`
With the following message:
Chrome 23.0 PhoneCat App Phone list view should display the current filter value within an element with id "status" FAILED
expect select binding 'query' toBe "nexus"
I think this is because the element isn't actually bound to query, the contents of the element use that binding, however, what should I do the make it pass?
Thanks in advance
Dave
EDIT: Controllers.js
'use strict';
/* Controllers */
function PhoneListCtrl($scope) {
$scope.phones = [
{"name": "Nexus S",
"snippet": "Fast just got faster with Nexus S.",
"age": 0},
{"name": "Motorola XOOM™ with Wi-Fi",
"snippet": "The Next, Next Generation tablet.",
"age": 1},
{"name": "MOTOROLA XOOM™",
"snippet": "The Next, Next Generation tablet.",
"age": 2}
];
$scope.orderProp = 'age';
}
I see that you have used twice ng-controller="PhoneListCtrl". This is likely to cause problems. Remove the one on the html tag .