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 = '';
Related
I am working with angularjs. I have a table with data column which has hyperlink and when clicked in <td> data the 'prID' is passed to the URL as shown in the demo. But issue is for some of the rows in the table i have multiple prID's passed, when clicked on it, it is passing all the prID's instead i want to pass only one prID on which user mouse over and click on that ID.
DEMO:
https://plnkr.co/edit/sWbpovAT7II1eM4yRA2X?p=preview
example: For second row in the table i have values 2; 30; 21 . When user mouseover and click on it currently it is passing 2; 30; 21 in the URL instead i want to pass single value at a time. When user mouse over on 2 it should pass value 2 and when mouseover on 30, it should pass 30...This way i have couple of rows with multiple prIDs and the data is dynamic.
sample code:
<table border="1">
<tr ng-repeat="data in dataInfo">
<td> {{data.prID}}</td>
</tr>
</table>
You need nested loop when multiple ID on data.prID. Please try this way:
<tr ng-repeat="data in dataInfo">
<td><span ng-repeat="link in data.prID.split(';')"> {{link}}<span ng-if="!$last">;</span></span></td>
</tr>
Here's the code I've edited from Hanif
// Code goes here
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('DataCtrl', function ($scope) {
$scope.dataInfo = [
{
"prID": "1",
"name": "Fight Club",
"desc": "Brad"
},
{
"prID": "2; 30; 21",
"name": "Matrix (Series)",
"desc": "Keanu Reeves"
},
{
"prID": "33",
"name": "V for Vendetta",
"desc": "Hugo Weaving"
},
{
"prID": "13",
"name": "V for Vendetta",
"desc": "Hugo Weaving"
},
{
"prID": "111; 55",
"name": "V for Vendetta",
"desc": "Hugo Weaving"
},
{
"prID": "3",
"name": "V for Vendetta",
"desc": "Hugo Weaving"
}
];
});
<!doctype html>
<html ng-app="ui.bootstrap.demo">
<head>
<script
src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<script src="script.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="DataCtrl">
<table border="1">
<tr ng-repeat="data in dataInfo">
<td>
<a ng-repeat="link in data.prID.split(';')" href="http://myURL.com/getInfo/viewStatus?prInfo={{link}}" target="_blank"> {{link}}<span ng-if="$index+1 != data.prID.split(';').length">;</span></a>
</td>
</tr>
</table>
</div>
</body>
</html>
Demo here
<input type="text" ng-model= "name" title="{{name}}">//this title shows name what ng-model contains
In the same way...
<select title ="{{item.actionId}}" ng-model="item.actionId">
<option ng-repeat="action in actionList" value="{{action.ACTION_ID}}">{{action.URL}}</option>
</select>
actionList:-
$scope.actionList = [{
"ACTION_ID": 39,
"URL": "/abc"
}, {
"ACTION_ID": 59,
"URL": "/xyz"
}];
Here item is the parent list. I am getting title as it's id as the value is id.
Here I want to get the corresponding url. How can I get the url.
The JSON data and the code looks fine, Check the demo below if you have missed anything.
DEMO
var app = angular.module('myApp', []);
app.controller('AppCtrl', function($scope) {
$scope.actionList = [{
"ACTION_ID": 39,
"URL": "/abc"
}, {
"ACTION_ID": 59,
"URL": "/xyz"
}];
});
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="AppCtrl">
<div class="form-group">
<select title ="{{item.actionId}}" ng-model="item.actionId">
<option ng-repeat="action in actionList" value="{{action.ACTION_ID}}">{{action.URL}}</option>
</select>
</div>
</div>
</body>
</html>
You can use ng-options along with ng-change to capture the ids and show url on title
var app = angular.module('app', []);
app.controller('Ctrl', function($scope) {
$scope.actionList = [{
"ACTION_ID": 39,
"URL": "/abc"
}, {
"ACTION_ID": 59,
"URL": "/xyz"
}];
$scope.getValues=function(){
debugger
$scope.selectedID=$scope.item.ACTION_ID;
$scope.selectedURL=$scope.item.URL;
console.log("selectedId:" + $scope.selectedID );
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div ng-app="app" ng-controller="Ctrl">
<div class="form-group">
<select ng-model="item" ng-change="getValues()" ng-options="action as action.URL for action in actionList" title="{{selectedURL}}">
</select>
</div>
</div>
</body>
</html>
You can simply do like below code:
<select ng-model="item" ng-options="action as action.URL for action in
actionList" title="{{item.URL}}">
You should use ng-option instead of ng-repeat. always use track by clause to set value in option list when creating from object
<!DOCTYPE html>
<html>
<body>
<select ng-model="item" ng-options="action as action.URL for action in actionList track by action.URL" >
<option value="">Volvo</option>
</select>
</body>
</html>
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>
The problem that i am getting is that my ng-repeat / ng-bind won't show the data inside $scope.articles. while in the console i get the data im expecting.
I now made a code snippit so it's easier to discover the problem.
var App = angular.module('App', []);
App.controller('WebCtrl', function($scope, $http) {
$scope.start = [{
"id": 1,
"text": "test1"
}, {
"id": 2,
"text": "test2"
}, {
"id": 3,
"text": "test3"
}, {
"id": 4,
"text": "test4"
}];
$scope.articles = $scope.start;
$http.get('/')
.then(function() {
$scope.menu = function(id) {
$scope.articles = $scope.start[id];
console.log($scope.articles);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!doctype html>
<html ng-app="App">
<head>
<meta charset="utf-8">
<title>Todos $http</title>
<script src="app.js"></script>
</head>
<body ng-controller="WebCtrl">
<ul>
<li style="list-style: none">
<button ng-click="menu(0)">1</button>
<button ng-click="menu(1)">2</button>
<button ng-click="menu(2)">3</button>
<button ng-click="menu(3)">4</button>
</li>
</ul>
<ul>
<li style="list-style: none" ng-repeat="article in articles">
{{article.text}}
</li>
</ul>
</body>
</html>
Your code starts with an articles object pointing to an array. Inside menu, it gets replaced by an object. ng-repeat iterates over its keys.
I guess the main change would be:
$scope.articles = $scope.start.slice(id, id + 1);
var App = angular.module('App', []);
App.controller('WebCtrl', function($scope, $http) {
$scope.start = [{
"id": 1,
"text": "test1"
}, {
"id": 2,
"text": "test2"
}, {
"id": 3,
"text": "test3"
}, {
"id": 4,
"text": "test4"
}];
$scope.articles = $scope.start;
$scope.menu = function(id) {
$scope.articles = $scope.start.slice(id, id + 1);
console.log($scope.articles);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!doctype html>
<html ng-app="App">
<head>
<meta charset="utf-8">
<title>Todos $http</title>
<script src="app.js"></script>
</head>
<body ng-controller="WebCtrl">
<ul>
<li style="list-style: none">
<button ng-click="menu(0)">1</button>
<button ng-click="menu(1)">2</button>
<button ng-click="menu(2)">3</button>
<button ng-click="menu(3)">4</button>
</li>
</ul>
<ul>
<li style="list-style: none" ng-repeat="article in articles">
{{article.text}}
</li>
</ul>
</body>
</html>
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"
}
]