I have 1 drop-down which contains values("Due Date","Tenure","NA". these values come from database) respectively.I have 2 text boxes textbox1 and textbox 2. I want textbox1(i.e DueDate) enabled if Dropdown value selected as "Due Date" & textbox2(i.e.TenureDate) enabled if Dropdown value selected as "Tenure".
<div>
#Html.DropdownListFor(m=>m.Tenure,new{ng_options="c
as c.name for c in duedateddl"})
</div>
<div>
#Html.TextBoxFor(m=>m.DueDate)
#Html.TextBoxFor(m=>m.TenureDate)
</div>
(function(angular) {
'use strict';
angular.module('ngrepeatSelect', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.data = {
model: null,
availableOptions: [
{name: 'DueDate'},
{name: 'TenureDate'},
{name: 'NA'}
]
};
}]);
})(window.angular);
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
</head>
<body ng-app="ngrepeatSelect">
<div ng-controller="ExampleController">
<form name="myForm">
<label for="repeatSelect"> Repeat select: </label>
<select name="repeatSelect" id="repeatSelect" ng-model="data.model">
<option ng-repeat="option in data.availableOptions" value="{{option.name}}">{{option.name}}</option>
</select>
<input type="textBox1" ng-disabled="data.model != 'DueDate'"/>
<input type="textBox2" ng-disabled="data.model != 'TenureDate'"/>
</form>
<hr>
<tt>model = {{data.model}}</tt><br/>
</div>
</body>
</html>
Related
I am trying to substitute, the drop down options "Yes/No" to true and false so that I can make usage of ng-hide to make the appearance of an input field dynamic. But the binding is not working as desired. Please check the JS bin link https://jsbin.com/piteqoduba/1/edit?html,output and advise.
<div ng-app="myApp" ng-controller="myCtrl">
<p>Delivery to same address?</p>
<ng-int="selectedVal={range.value}"></ng-int>
<select ng-model="selectedVal" ng-options="range.display for range in range" >
</select>
<p ng-hide= "selectedVal" >Fill your address below.</p>
<input type="text" ng-hide = "selectedVal">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.range = [{display: "yes", value:true},
{display: "no", value: false}
];
});
</script>
Substitute
ng-options="range.display for range in range"
with
ng-options="range.value as range.display for range in range"
This will display Yes/No in dropdown while the values will be true/false.
You will get an object in model so you have to do something like
<input type="text" ng-hide = "selectedVal.value">
Here is working fiddle
Try this. Actually you are using selected object for ng-hide="selectedVal". selectedVal is Object. That's a problem. You want true or false. So ng-hide="selectedVal.value" is correct.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p>Delivery to same address?</p>
<ng-int="selectedVal={range.value}"></ng-int>
<select ng-model="selectedVal" ng-options="range.display for range in range" >
</select><p>{{selectedVal}}</p>
<p ng-hide="selectedVal.value" >Fill your address below.</p>
<input type="text" ng-hide="selectedVal.value">
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.range = [{display: "yes", value:true},
{display: "no", value: false}
];
});
</script>
</body>
</html>
I am getting a form data from json.I have binded all data into a form fields, but Resource field data coming as separate object and I want to show it as comma separated.I tried this,But its showing two resouce fields. How to do it?
Here is my code
<form ng-repeat="data in editProjDetails">
<div>
<label class="displayBlock">Project Name</label>
<label><input type="text" ng-model="data.ProjectName" ng-disabled="all"></label>
</div>
<div>
<label class="displayBlock">Client</label>
<label><input type="text" ng-model="data.Client" ng-disabled="all"></label>
</div>
<div id="projectCoOrdBlock">
<label class="displayBlock">Project Co-ordinator</label>
<label><input type="text" ng-model="data.ProjectCoordinator" ng-disabled="true"></label>
</div>
<div id="resourceBlock">
<label class="displayBlock">Resource</label>
<label><input type="text" ng-repeat="x in data.ResourceAllocated" ng-model="x.ResourceName" ng-disabled="true"></label>
</div>
</form>
I did this in jquery.This is what I am trying to implement in angular
rAllo = data.ResourceAllocated;
if (rAllo.length == 0) {
$("#resource").val("No resources available");
}
else {
for (var i = 0; i < rAllo.length; i++) {
var arrayDatas = rAllo[i].ResourceName;
resource.push(arrayDatas)
}
$("#resource").val(resource)
}
$scope.resourceAllocated= $scope.data.ResourceAllocated.map(function(el){return el.name}).join(",");
<input type="text" ng-model="resourceAllocated">
Try using this
<!DOCTYPE html>
<html lang="en-US">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-model="resourceAllocated">
</div>
</body>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.yearbtn = [
{year:'2022'},
{year:'2021'},
{year:'2019'},
{year:'2018'},
{year:'2017'},
{year:'2016'},
{year:'2015'},
];
$scope.resourceAllocated= $scope.yearbtn.map(function(el){return el.year}).join(",");
});
</script>
</html>
Working Demo
Try it like this,
<div id="resourceBlock" ng-repeat="x in data.ResourceAllocated">
<label class="displayBlock">Resource</label>
<label><input type="text" ng-model="x.ResourceName" ng-disabled="true"></label>
</div>
DEMO
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.data =[{"Id":1010,"ProjectName":"aaa","Client":"aaa","ProjectCoordinator":["RajkumarS"],"OnsiteCoordinator":"aaa","ResourceAllocated":[{"ResourceName":"RajkumarS","ResourceId":9,"RoleName":"Manager"},{"ResourceName":"aSd","ResourceId":1012,"RoleName":"tester"}],"ProjectRoles":null}];
$scope.resourceAllocated= $scope.data[0].ResourceAllocated.map(function(el){return el.ResourceName}).join(",");
});
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello AngularJS</title>
</head>
<body ng-controller="myCtrl">
<label class="displayBlock">Resource</label>
<label><input type="text" ng-model="resourceAllocated" ></label>
<script src="https://code.angularjs.org/1.6.1/angular.js"></script>
</body>
</html>
I got this code from Vladyslav Babenko from this post over here (Clone elements in angularjs):
var App = angular.module('App', []).controller('Test', ['$scope',
function($scope) {
$scope.inputCounter = 0;
$scope.inputs = [{
id: 'input'
}];
$scope.add = function() {
$scope.inputTemplate = {
id: 'input-' + $scope.inputCounter,
name: ''
};
$scope.inputCounter += 1;
$scope.inputs.push($scope.inputTemplate);
};
$scope.teste = function (pergunta) {
console.log("in");
}
}
])
<!DOCTYPE html>
<html ng-app="App">
<head lang="en">
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-controller="Test">
<form ng-submit="teste()">
<div class="pure-g entry" ng-repeat="input in inputs track by input['id']">
<div class="pure-u-1-5">
<input type="text" class="pure-input-1" id="input" name="input-1">
</div>
<div class="pure-u-1-5">
<input type="text" class="pure-input-1" id="date" name="date">
</div>
<div class="pure-u-1-5">`enter code here`
<input type="text" class="pure-input-1" id="input-2" name="input-2">
</div>
</div>
</form>
<button type="button" id="add" ng-click="add()">Add</button>
<button type="submit">teste</button>
</body>
</html>
It works fine, but when a add multiples forms, how can I get the values from each form?
Give every input a ng-model:
<input type="text" class="pure-input-1" id="input-2" ng-model="user.name" name="input-2">
Now you can adress the input value in your controller with:
$scope.user.name
Read more about this topic: https://docs.angularjs.org/guide/forms
I want to get the ID of selected option in datalist, using select it is easy but I dont know how to get the ID of the option name.
I made one code snippet at JSBIN
var app = angular.module('app', []);
app.controller('getLocalityId', function($scope) {
$scope.localityList = [{
name: "Rome",
id: 1
}, {
name: "London",
id: 2
}, {
name: "Paris",
id: 3
}];
$scope.fetchId = function(id) {
console.log(id);
};
});
HTML goes like this
<!DOCTYPE html>
<html ng-app='app'>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="col-lg-6" ng-controller="getLocalityId">
<label for="locality">Locality</label>
<input class="input form-control" placeholder="Search By Name" list="locality" ng-model="obj.id" ng-change="fetchId(obj.id)" />
<datalist id="locality" name="locality">
<select>
<option ng-repeat=" obj in localityList" value="{{ obj.name }}" selected-value="{{ obj.id }}">{{ obj.id }}</option>
</select>
</datalist>
</div>
</body>
</html>
Use ng-options in your case:
<select ng-model="currentID" ng-options="obj.id as obj.name for obj in localityList"></select>
Demo
I am new to AngularJs and Bootstrap. I am having trouble with date binding.
My JSON has a date in YYYY-MM-DD format, but it is not binding with the Bootstrap date control.
Is it not possible with out directives or any other UI library (like angular strap or UI etc)
I have created plunker, please let me know if I have made some mistakes
http://plnkr.co/edit/FUjgepdJwC3N5iU6Cqlw?p=preview
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.11/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.11/angular-route.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="myApp">
<div class="panel-body" ng-controller="ActionPlanDetailCtrl">
<form role="form">
<div class="form-group">
<label for="id">ID</label> <input type="text" class="form-control" id="inputId" placeholder="ID" ng-model="actionPlan.id"
title="ID"
>
</div>
<div class="form-group">
<label for="visitDate">Visit Date</label> <input type="date" name="inputVisitDate" ng-model="actionPlan.visitDate"
class="form-control" placeholder="yyyy-MM-dd"
>
</div>
<div class="form-group">
<label for="name">Subject</label> <input type="text" class="form-control" id="inputSubject" placeholder="Subject"
ng-model="actionPlan.subject" title="subject"
>
</div>
</form>
</div>
</body>
</html>
app.js
'use strict';
angular.module('myApp', [ 'dealerActionPlanModule' ]);
angular.module('dealerActionPlanModule', []);
/* Controllers */
angular.module('dealerActionPlanModule');
angular.module('dealerActionPlanModule').controller('ActionPlanDetailCtrl',
[ '$scope', function($scope) {
$scope.actionPlan = {
id : '123',
region : 'North',
visitDate : '2014-01-01',
subject : 'High Complaint in May'
} ;
} ]);
Note : I prefer to have simple solution, as I am new to Java Script and angular JS (Basically a java guy)
Any help is appreciated.
The easiest way is convert your string to Date object please see here
http://plnkr.co/edit/i1dsnV4pZqIuIArRgqTl?p=preview
angular.module('dealerActionPlanModule').controller('ActionPlanDetailCtrl',
[ '$scope', function($scope) {
$scope.actionPlan = {
id : '123',
region : 'North',
visitDate : '2014-02-01',
subject : 'High Complaint in May'
} ;
$scope.actionPlan.visitDate =new Date( Date.parse( $scope.actionPlan.visitDate));
} ]);
angular.module('dealerActionPlanModule').controller('ActionPlanDetailCtrl',
[ '$scope','$filter', function($scope,$filter) {
$scope.actionPlan = {
id : '123',
region : 'North',
visitDate : new Date('2014-02-01'),
subject : 'High Complaint in May'
} ;
$scope.date= $filter('date')($scope.actionPlan.visitDate, 'medium')
$scope.date1=$filter('date')($scope.actionPlan.visitDate, 'shortDate')
console.log($scope.date);
console.log($scope.date1);
} ]);