I am new to angular js. Now I have an input where I have implemented a token field. Now, the value attribute of the input box has values in an array. Now I don't know how we can use that array in the html. Like
value="abc,pqr"
This works , But I have an array and that array I need to use in the html.
<div class="form-group">
<label for="inputEmail3" class="col-sm-2">Should</label>
<div class="col-xs-5">
<input name="should"
id="should"
type="text"
value=""
placeholder="should requirement"
class="form-control setmargin">
</div>
</div>
$scope.somevalues = ['abc','pqr','hhhh'];
This values are coming from the ajax call. Now I have bootstrap tokenfield so I need to have all this values in that input box . How can I use this array values in the html value atttibute ?
To clarify, you have an array of values coming from an ajax call, but you would like them to be comma-separated as a string?
You want to use the join function. This will combine all the elements in the array into a string, separated by the string as the parameter (in this case, a comma).
var somevar = ['abc','pqr','hhhh'].join(',');
document.getElementById('should').value = somevar;
<div class="form-group">
<label for="inputEmail3" class="col-sm-2">Should</label>
<div class="col-xs-5">
<input name="should"
id="should"
type="text"
value=""
placeholder="should requirement"
class="form-control setmargin">
</div>
</div>
You should describe it better what you want to do.
But, you can join the array: ["abc", "pqr", "hhhh"].join(','), which will give you "abc,pqr,hhhh".
If you want that to appear in your <input>, then add ng-model="value" to it, and populate it in your controller: $scope.value = ...;. Here is a demo:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.somevalues = ['abc', 'pqr', 'hhhh'];
$scope.value = $scope.somevalues.join(',');
$scope.toArray = function(){
$scope.somevalues = angular.copy($scope.value.split(','));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2">Should</label>
<div class="col-xs-5">
<input name="should" id="should" type="text" ng-model="value" ng-change="toArray()" placeholder="should requirement" class="form-control setmargin">
<div>To string: {{value}}</div>
</div>
<div>To array: {{somevalues}}</div>
</div>
</div>
try to convert tostring() like
$scope.somevalues = ['abc', 'pqr', 'hhhh'].toString();
Copied Snippet from #richard
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.somevalues = ['abc', 'pqr', 'hhhh'].toString();
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2">Should</label>
<div class="col-xs-5">
<input name="should" id="should" type="text" ng-model="somevalues" placeholder="should requirement" class="form-control ">
</div>
</div>
</div>
Related
How copy value of input text to other Input texts elements in AngularJS 1.X
But each input has have his own property in controller
I've tried so far
<div class="paramWrap"> // copy from here
<label for="accoubntDis">Account Discount</label>
<input id="accoubntDis" type="text" class="form-control" ng-model="accoubntDis">
</div>
<pre>{{accoubntDis}}</pre> // only this displayed
<div class="space"></div>
<div class="paramWrap">
<label for="365Dis">O365 Exchange Unlicensed Discount</label>
<input id="365Dis" type="text" class="form-control" value="{{accoubntDis}}" ng-model="accoubntDis12">
</div>
<div class="space"></div>
<div class="paramWrap">
<label for="gSuiteO365">G Suite / O365 Exchange Paused/Archived</label>
<input id="gSuiteO365" type="text" class="form-control" value={{accoubntDis}} ng-model="gSuiteO365">
</div>
What I see actually that only the <pre>{{accoubntDis}}</pre> is displayed
why value/ng-value={{accoubntDis}}/"accoubntDis" not worked in <input .... ??
Do I need to use any JS functions on controller side for this ?
The simplest and best approach would be to use ng-change instead of ng-value.
HTML code:
<input type = "text" ng-model = "first" ng-change = "changeSecond()"/>
<input type = "text" ng-model = "second"/>
Angular: js corresponding code
$scope.changeSecond = function() {
$scope.second = $scope.first;
}
I tried with "ng-value", its working in angular 1.5 and above.
If you angular is below 1.5 you can go for below approach.
So better you write a function call on change of input field1, and in
that function assign the value of field1 to field2. Consider the below sample example.
HTML:
<input type="text" ng-model="data" ng-change="updateField()">
<input type="text" ng-model="meta">
JS:
$scope.data;
$scope.meta;
$scope.updateField= function(){
$scope.meta=$scope.data;
}
Use ng-value directive.
<input ng-value="accoubntDis" />
Refer to this API doc.
BTW, as you're using ng-model, value will be overridden so that it seems to be not working.
<input ng-model="accoubntDis" />
In input doesn't need the {{}}, just go with value="accoubntDis" will do.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="paramWrap"> // copy from here
<label for="accoubntDis">Account Discount</label>
<input id="accoubntDis" type="text" class="form-control" ng-model="accoubntDis" ng-change="calculate()">
</div>
<pre>{{accoubntDis}}</pre> // only this displayed
<div class="space"></div>
<div class="paramWrap">
<label for="365Dis">O365 Exchange Unlicensed Discount</label>
<input id="365Dis" type="text" class="form-control" ng-value="accoubntDis2">
</div>
<div class="space"></div>
<div class="paramWrap">
<label for="gSuiteO365">G Suite / O365 Exchange Paused/Archived</label>
<input id="gSuiteO365" type="text" class="form-control" ng-model="accoubntDis3">
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.accoubntDis = "100";
$scope.accoubntDis2 = $scope.accoubntDis * 2;
$scope.accoubntDis3 = $scope.accoubntDis / 2;
$scope.calculate = function(){
$scope.accoubntDis2 = $scope.accoubntDis * 2;
$scope.accoubntDis3 = $scope.accoubntDis / 2;
}
});
</script>
</body>
</html>
Use ng-value directive.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div class="paramWrap">
<label for="accoubntDis">Account Discount</label>
<input id="accoubntDis" type="text" class="form-control" ng-model="accoubntDis">
</div>
<pre>{{accoubntDis}}</pre>
<div class="space"></div>
<div class="paramWrap">
<label for="365Dis">O365 Exchange Unlicensed Discount</label>
<input id="365Dis" type="text" class="form-control" ng-value="accoubntDis" ng-model="accoubntDis12">
</div>
<div class="space"></div>
<div class="paramWrap">
<label for="gSuiteO365">G Suite / O365 Exchange Paused/Archived</label>
<input id="gSuiteO365" type="text" class="form-control" value={{accoubntDis}} ng-model="gSuiteO365">
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.accountDis = "Hello World!";
$scope.accoubntDis=123;
});
</script>
<p>This example shows how to use AngularJS expressions to set the value of an input field.</p>
</body>
</html>
My problem is pretty simple but elusive in nature. When you will load the index.php, (as localhost using xampp) you will be presented with a simple form. Now there are multiple elements on this form, and it's still a work in progress, so the possibility of multiple bugs is plausible. However, there's this one bug that's really annoying.
THE PROBLEM:
On changing the Due Date element, the content of the following input
boxes changes due to the fact that they're bind with it. Now it won't
matter how many times you change the due date, because every time the
value in the fields will change accordingly, Thanks to angularjs.
The BUG creeps in when you change the value of an input field. Say
originally it was 27 and then you changed it to , idk say 10.* NOW
IF YOU CHANGE THE DUE DATE, THE ALTERED INPUT FIELD REMAINS THE SAME
* I.E. WITH VALUE 10, WHEREAS I WANT IT TO CHANGE NEVERTHELESS.
Moreover, if one of you guys is the apotheosis of angularjs coders,
and he got some tips for me, I would just like to say..... "I APPRECIATE
THAT".
index.php
<!-- addService.html -->
<?php
$version = time();
?>
<!DOCTYPE html>
<html>
<head>
<!-- CSS (load bootstrap and our custon css files) -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- JS (load angular, ui-router and our custom js file) -->
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="ctrl-add-service.js"></script>
<script src="services.js"></script>
</head>
<body>
<div ng-app="mainApp" ng-controller="ctrl-add-service">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<h1 align="center">SERVICE FORM</h1>
<form role="form" ng-submit="createService()">
<div>
<label>Service Name</label>
<input type="text" class="form-control" placeholder="Enter service name here" ng-pattern="/^[a-zA-Z0-9_]*$/" required>
</div>
<div class="row">
<div class="col-md-6">
<label>Due Date</label>
<input type="date" class="form-control" ng-model='dueDate' ng-change="setFields()" required>
</div>
<div class="col-md-6">
<label>Task Date</label>
<input type="date" class="form-control" required>
</div>
</div>
<div style="margin-top: 20px;margin-bottom: 20px;" align="center">
<label>Period</label>
<label class="radio-inline"><input type="radio" ng-model="value" value='12' ng-change="setFields()">Annually</label>
<label class="radio-inline"><input type="radio" ng-model="value" value='6' ng-change="setFields()">Semi-Annually</label>
<label class="radio-inline"><input type="radio" ng-model="value" value='4' ng-change="setFields()">Quarterly</label>
<label class="radio-inline"><input type="radio" ng-model="value" value='1' ng-change="setFields()">Monthly</label>
</div>
<div align="center">
<div>
<div style="display:inline-block;"><label>Jan</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[0]' ng-required='!fields[0]'></div>
<div style="display:inline-block;"><label>Feb</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[1]' ng-required='!fields[1]'></div>
<div style="display:inline-block;"><label>Mar</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[2]' ng-required='!fields[2]'></div>
<div style="display:inline-block;"><label>Apr</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[3]' ng-required='!fields[3]'></div>
</div>
<div style="display:inline-block;"><label>May</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[4]' ng-required='!fields[4]'></div>
<div style="display:inline-block;"><label>Jun</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[5]' ng-required='!fields[5]'></div>
<div style="display:inline-block;"><label>Jul</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[6]' ng-required='!fields[6]'></div>
<div style="display:inline-block;"><label>Aug</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[7]' ng-required='!fields[7]'></div>
<div>
<div style="display:inline-block;"><label>Sep</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[8]' ng-required='!fields[8]'></div>
<div style="display:inline-block;"><label>Oct</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[9]' ng-required='!fields[9]'></div>
<div style="display:inline-block;"><label>Nov</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[10]' ng-required='!fields[10]'></div>
<div style="display:inline-block;"><label>Dec</label><input type="number" class="form-control" ng-value='date' ng-disabled='fields[11]' ng-required='!fields[11]'></div>
</div>
</div>
<div align="center" style="margin-top: 20px;">
<button type="submit" class="btn btn-primary">Create</button>
<button type="reset" class="btn btn-danger">Reset</button>
</div>
</form>
</div>
<div class="col-md-2"></div>
</div>
</div>
</body>
</html>
ctrl-add-service.js (controller)
// ctrl-add-service.js Controller for the add service option in the nav bar of the home screen.
var mainApp = angular.module("mainApp",[]);
mainApp.controller('ctrl-add-service',function($scope, DueDateService){
$scope.value ='1';
$scope.setFields = function() {
$scope.date = DueDateService.date($scope.dueDate);
$scope.fields = DueDateService.fields( DueDateService.month($scope.dueDate), $scope.value); // first parameter passes month in int, second parameter passes period value in int.
};
});
services.js (services for the app)
// services.js services.js of the account direcotry of the project. It is used by the mainApp.
//DueDateService
mainApp.service('DueDateService', function(){
this.month = function(date) {
var temp = new Date(date);
month = temp.getMonth();
console.log(month+1+" is the month");
return (month+1);
};
this.date = function(date) {
var temp = new Date(date);
date = temp.getDate();
console.log(date+" is the date");
return (date);
};
this.fields = function(month,period) {
var lap = parseInt(period); // possible values of lap can be [12,6,4,1]
var iteration = 12/lap; // possible values of iteration can be [1,2,3,12]
var selectedFields = [true,true,true,true,true,true,true,true,true,true,true,true];
for (var i=1; i<=iteration; i++) {
if(month>12) {
month = month - 12;
}
selectedFields[month-1]= false;
month = month + lap;
}
return selectedFields;
};
});
I think you need to change the ng-value to ng-model and create an Array of your dates, like this:
ng-model='dates[0]'
ng-model='dates[1]'
ng-model='dates[2]'
...
And your controller would be like this:
var date = DueDateService.date($scope.dueDate);
$scope.dates = Array(12).fill(date);
See at this plunker: https://plnkr.co/edit/p8O14Y80hCWyNmxnYxbF
In following lines why are you taking ng-value, As far as I think you will have to take ng-model="date" And this will work fine.
see the ng-value usages
https://docs.angularjs.org/api/ng/directive/ngValue
<div style="display:inline-block;"><label>Jan</label><input type="number" class="form-control" ng-value='date' ng-model="date" ng-disabled='fields[0]' ng-required='!fields[0]'></div>
I have a detail view and from database only single record is comming, I need to assign data to controls. below is my code
var app = angular.module("MyProductApp", []);
app.controller("ProductsController", function ($scope, $http) {
var ProductID = #Html.Raw(Json.Encode(ViewData["ProductID"]));
$http.get('/api/Products/GetProductForEditOrDetail',{params: { ProductID : ProductID }}).
success(function(data){
$scope.Product = data;
}).
error(function(data){
alert("msg");
});
});
and below is html code
<div ng-app="MyProductApp" class="form-horizontal">
<div ng-controller="ProductsController">
<h4>Product</h4>
<hr />
<div class="form-group" >
<label class="control-label col-md-2">Product Name</label>
<div class="col-md-10">
<input id="txtProductName" type="text" class="form-control" name="txtProductName" disabled="disabled" Value="{{Product.ProductName}}" />
<input id="hdnProductID" type="hidden" class="form-control" name="hdnProductID" value="{{Product.ProductID}}" />
<input id="hdnCategoryID" type="hidden" class="form-control" name="hdnCategoryID" value="{{Product.CategoryID}}" />
</div>
</div>
</div>
</div>
You should use ngModel directive
The ngModel directive binds an input,select, textarea (or custom form control) to a property on the scope using NgModelController, which is created and exposed by this directive.
<input ng-model="Product.ProductName" />
ngModel is what you are looking for, read the docs !
You wanted to pass value with hidden fields, so ng-model would not work in that case, you could use ng-value in that case
<input id="hdnCategoryID" type="hidden" class="form-control" name="hdnCategoryID" ng-value="Product.CategoryID" />
I have a very large model that I am creating a form for using AngularJS. It's nested over 4 levels deep and the names of the fields on the model are very long. I end up with markup like this.
<input type="text" ng-model="something_super_long.another_very_long_thing.hey_lets_add_another.ok_one_more._last_one_seriously"></input>
This is pretty annoying. I wish that I could set up some kind of nested inheritance to avoid setting super long ng-model names over and over. Here is a fully fleshed out EXAMPLE of what I am talking about. I made the model a REASONABLE level of depth only 3 levels of not so long names.
Instead of doing this.
<div ng-app="myApp">
<div ng-controller="myController">
<input type="text" ng-model="building_in_san_francisco.layout_floor_1.room_1" />
<input type="text" ng-model="building_in_san_francisco.layout_floor_1.room_2" />
<input type="text" ng-model="building_in_san_francisco.layout_floor_1.room_3" />
</div>
</div>
I want to do something more like this:
<div ng-app="myApp">
<div ng-controller="myController">
<div ng-model="building_in_san_francisco">
<div ng-model="layout_floor_1">
<input type="text" ng-model="room_1" />
<input type="text" ng-model="room_2" />
<input type="text" ng-model="room_3" />
</div>
</div>
</div>
</div>
Does anyone know if anything like this is possible?
You could use ng-init in the templates and nest scopes. This keeps your controller clean and uses the child scopes only in the template:
<div ng-app="myApp">
<div ng-controller="myController">
<div ng-scope ng-init="building = buildings.building_in_san_francisco">
<div ng-scope ng-init="floor = building.layout_floor_1">
<input type="text" ng-model="floor.room_1" />
<input type="text" ng-model="floor.room_2" />
<input type="text" ng-model="floor.room_3" />
</div>
</div>
</div>
</div>
JS
angular.module('myApp', [])
.controller('myController', function mainCtrl($scope) {
$scope.buildings = {
building_in_san_francisco: {
layout_floor_1: {
room_1: '1',
room_2: '2',
room_3: '3'
}
}
};
});
You can try this in your controller:
$scope.something=building_in_san_francisco.layout_floor_1;
And when you call it
<input type="text" ng-model="something.room_1" />
I have property fields that contains string array:
in controller I have:
$scope.data = {};
$scope.fields = [
"new0.name",
"new0.type",
"new0.address",
"new0.city",
"new0.postalCode"
];
in view I have:
<div class="control-group" ng-repeat="f in fields">
<label class="control-label">Some field name</label>
<div class="controls">
<input type="text" name="{{f}}" ng-model="data.f" class="input-xlarge">
</div>
</div>
In the ng-repeat, how can I concatenate value of f to the ng-model to get, for example ng-model="data.new0.name"?
To reference a property of an object with a variable, use bracket notation
data[f]