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"
}
]
Related
I want to filter KendoDropDownList datasource data by presenting an ID in array.
As far as I know there is no such built-in filters that's why I decided to created CSV list with identifiers and use contains filter. But unfortunately this approach seems to be not working. Please see my fiddle below: https://dojo.telerik.com/igEREXUT
Can anybody explain why contains is not working? I would expect to see first and third item.
$(document).ready(function() {
var data = [{
text: "Black",
value: "1",
Clients: "-100-,-101-,-103-" //this should be displayed after filtering
},
{
text: "Orange",
value: "2",
Clients: "-200-,-101-,-303-"
},
{
text: "Grey",
value: "3",
Clients: "-300-,-102-,-103-" //this should be displayed after filtering
}
];
// create DropDownList from input HTML element
$("#color").kendoDropDownList({
dataTextField: "Clients",
dataValueField: "value",
dataSource: data,
index: 0
});
var color = $("#color").data("kendoDropDownList");
color.select(0);
setTimeout(function() {
console.log('count before filtering: ' + color.dataSource.view().length);
color.dataSource.filter([{
field: "Clients",
op: "contains",
value: "-103-"
}]);
console.log('count after filtering: ' + color.dataSource.view().length);
}, 1000);
});
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/dropdownlist/index">
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div id="cap-view" class="demo-section k-content">
<h4>Customize your Kendo Cap</h4>
<h4><label for="color">Cap Color</label></h4>
<input id="color" value="1" style="width: 100%;" />
</div>
</div>
</body>
</html>
You have to use operator property instead of op in color.dataSource.filter method.
Refernce link
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>
<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 am using ng-options for my select tag to have choices for the users. Everything works perfectly but after selecting an option for the first time the default blank value is gone. What if I want to revert back to the defaul blank value again? How can that be done? How can I retain that blank value?
Here is an example of my code:
<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-controller="myController">
<h1>Hello World!</h1>
<select ng-model="mySelection" name="" id="" ng-options="x.value as x.label for x in myOptions">
</select>
</body>
</html>
<script>
var app = angular.module('app', []);
app.controller('myController', function($scope){
$scope.myOptions = [{
"value": null,
"label": null,
},{
"value": "First",
"label": "First",
},{
"value": "Second",
"label": "Second",
},{
"value": "Third",
"label": "Third",
}]
});
</script>
Here is the plunker: http://plnkr.co/edit/5f17YxRfWFI4g40t3NEf?p=preview
use
<select ng-model="mySelection" name="" id="" ng-options="x.value as x.label for x in myOptions">
<option value=""></option>
</select>
Don't pollute your 'myOptions' with dummy null object, as APIs will not return you the same. you need to handle it on presentation layer, as shown above. while saving, if use selects empty, it will be saved as null (if handled properly)
also you can have something like this
<option value="">---select---</option>
Just add blank option to your options and select the blank by default like:
<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body ng-controller="myController">
<h1>Hello World!</h1>
<select ng-model="mySelection" name="" id="" ng-options="x.value as x.label for x in myOptions">
</select>
</body>
</html>
<script>
var app = angular.module('app', []);
app.controller('myController', function($scope){
$scope.mySelection = '';
$scope.myOptions = [{
"value": "",
"label": "",
},{
"value": "First",
"label": "First",
},{
"value": "Second",
"label": "Second",
},{
"value": "Third",
"label": "Third",
}]
});
</script>
here we add the blank option
{
"value": "",
"label": "",
}
and select that empty option $scope.mySelection = '';
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 .