How to assign value to ng-model definition - angularjs

I am using ui-bootstrap for typeahead in my application.
<input type="text" ng-model="newItem.id" class="form-control">
<pre>Model: {{customSelected | json}}</pre>
<input type="text" ng-model="customSelected" typeahead="asset as asset.asset_name for asset in assets | filter:{asset_name:$viewValue}" class="form-control">
When I select the autocompleted value, I can see my objects printed. But the problem is I am using newItem object to set form values and passing to $http requests, So how can I set customSelected.id to newItem.id ?
Getting error when I use something like this,
<input type="text" ng-model="newItem.id=customSelected.id" class="form-control">
Demo

If you want to assign the selected asset id to newItem.id:
<input type="text" ng-model="newItem.id" typeahead="asset.id as asset.asset_name for asset in assets | filter:{asset_name:$viewValue}" class="form-control">
UPDATE (FIDDLE)
View:
<div ng-app="App">
<div ng-controller="ctrl">
<input type="text" ng-model="newItem.id" class="form-control" />
<input
type="text"
ng-model="customSelected"
typeahead="asset as asset.asset_name for asset in assets | filter:{asset_name:$viewValue}"
class="form-control" />
</div>
</div>
Ctrl:
function ctrl($scope){
$scope.newItem = {};
$scope.assets = [
{
"id":"1",
"asset_reg_no":"AST1",
"asset_name":"Omega Shopping Complex"
},
{
"id":"2",
"asset_reg_no":"AST2",
"asset_name":"Keedam Chicken Farm"
}
];
$scope.$watch('customSelected', function(asset, oldAsset){
if(!asset && !oldAsset){
return;
}
if(oldAsset && !asset){
delete $scope.newItem.id;
delete $scope.newItem.asset_reg_no;
return;
}
$scope.newItem.id = asset.id;
$scope.newItem.asset_reg_no = asset.asset_reg_no;
});
}

If I understand you, this demo is what you want
function ctrl($scope){
$scope.assets = [{"id":"1","asset_reg_no":"AST1","asset_name":"Omega Shopping Complex","asset_type_id":"2","description":"Shopping Complex in Calicut","created_on":"2014-01-28 16:03:23","asset_type_name":"Building"},{"id":"2","asset_reg_no":"AST2","asset_name":"Keedam Chicken Farm","asset_type_id":"2","description":"Chicken farm in Valivida","created_on":"2014-01-28 16:04:06","asset_type_name":"Building"}];
$scope.newItem = {};
$scope.$watch('customSelected', function(asset, oldAsset){
$scope.newItem.id = asset.id;
$scope.newItem.text = asset.asset_name;
});
}

Related

How to create a "other" or "catch all" radio button?

Suppose I want to present a few default options for the user but also want to allow them to enter their own value.
e.g.
Please select one of the following:
[ ] apple
[ ] pear
[ ] other: ___________
I want it so that if "other" is selected, then the input field that follows should be enabled and allow typing.
Html might look like this:
<input type="radio"
name="fruit"
ng-model="fruit"
value="apple"
> apple
<input type="radio"
name="fruit"
ng-model="fruit"
value="pear"
> pear
<input type="radio"
name="fruit"
ng-model="???"
value="???"
> Other:
<input type="text"
class="form-control"
ng-model="fruit"
ng-disabled="???">
What would you do here?
I had an implementation where the default options trigger an action on ng-change such that it changed a $scope.isOther to true, which would enable the input box and check the other radio box like so
<input type="radio"
name="fruit"
ng-model="fruit"
value="apple"
ng-change="isOther=true"
> apple
<input type="radio"
name="fruit"
ng-model="fruit"
value="pear"
ng-change="isOther=true"
> pear
<input type="radio"
name="fruit"
ng-model="isOther"
ng-change="fruit=null"
value="true"
> Other:
<input type="text"
class="form-control"
ng-model="fruit"
ng-disabled="!isOther">
That sort of works. But when I reload the page/data, if I have an "other" value entered, it doesn't know to automatically check "other", although my "other" value is in the input box. I could write some more code change the isOther value when I'm loading the data but I'm wondering if I'm even going about this the right way or whether there's a "catch all" that allows a radio box to be checked if it doesn't match any other values.
You can do it this way:
var myapp = angular.module('myApp', []);
myapp.controller('MyController', function($scope) {
$scope.fruits = ['apple', 'orange', 'plum', 'pear'];
$scope.fruit = {selectedOption: 'orange'};
$scope.isDisabled = function() {
if (_.contains($scope.fruits, $scope.fruit.selectedOption)) {
return true;
}
return false;
};
$scope.add = function() {
if($scope.x !== undefined && $scope.x !== '') {
$scope.fruits.push($scope.x);
$scope.fruit.selectedOption = $scope.x;
$scope.x = '';
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div id='main' ng-app='myApp'>
<form name="myForm" ng-controller="MyController">
<div ng-repeat="f in fruits track by $index">
<input type="radio" name="fruit" ng-model="fruit.selectedOption" value={{f}}> {{f}}
</div>
<input type="radio" name="fruit" ng-model="fruit.selectedOption" value="other"> Other:
<input type="text" ng-model="x" ng-disabled="isDisabled()" ng-blur="add()">
<br> fruit = {{fruit.selectedOption}}
</form>
</div>
JSFiddle
I don't have a perfect answer, but I ended up doing it this way
html:
<div id='main' ng-app='myApp'>
<form name="myForm" ng-controller="MyController">
<div ng-repeat="f in fruits track by $index">
<input type="radio" name="fruit" ng-model="fruit.value" ng-value="f" ng-change="disableOther()"> {{f}}
</div>
<input type="radio" name="otherfruit" ng-change="fruit.value=null" ng-model="isOther" ng-value="true"> Other:
<input type="text" ng-model="fruit.value" ng-change="checkOther()" ng-class="{'disabled-input':isStandardFruit()}">
<br> fruit = {{fruit.value}}
</form>
</div>
code:
var myapp = angular.module('myApp', []);
myapp.controller('MyController', function($scope) {
$scope.fruits = ['apple', 'orange', 'plum', 'pear'];
$scope.fruit = {value:'orange'};
$scope.isStandardFruit = function() {
for(var i=0; i<$scope.fruits.length; i++) {
if( $scope.fruits[i] == $scope.fruit.value ) {
return true;
}
}
return false;
}
$scope.disableOther = function() {
$scope.isOther = false;
}
$scope.checkOther = function() {
if( !$scope.isStandardFruit() ) {
$scope.isOther = true;
}
}
});
JSFiddle
The one drawback is that if you type a standard fruit into the "other" input box, then it selects multiple radio buttons. I could uncheck the "other" button but then you couldn't type a fruit that contained the standard fruit as a prefix (e.g. you wouldn't be able to type "apple pear")
If anyone can come up with a better answer, I will change my vote and answers

AngularJs: Ng-model object and single model Together

I do not have enough English to describe it, but I think you will understand it from the codes.
Basically my problem is that ng-model = "" ng-options = "" does not come up with form data when used together.
<select class="form-control" name="car_id" ng-model="car_id" ng-options="I.car_brand_code as I.car_brand_name for I in CarList" ng-change="GetState()" >
<option value="">Select Car</option>
</select>
The selection box for the brands of these cars
<div class="form-group">
<label class="mtb10">Model Year</label>
<input type="text" name="modelYear" class="form-control" ng-model="data.modelYear" placeholder="Car Year...">
</div>
This is the other form objects. Where ng-model is a different data "data." I can get it. How can I get the value in the selection box.
I need to get the "car_id" value.
Try this :
On change of the dropdown options pass the selected value into the function as a param.
Use array.filter() method to fetch the model year for the selected car based on the car id.
DEMO
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',function($scope) {
$scope.CarList = [
{
"car_brand_code": 1,
"car_brand_name": "Maruti",
"model_year": 1990
},
{
"car_brand_code": 2,
"car_brand_name": "Ford",
"model_year": 2005
}
];
$scope.GetState = function(carId) {
var selectedCar = $scope.CarList.filter(function(item) {
return item.car_brand_code == carId;
});
$scope.data = {
"modelYear" : selectedCar[0].model_year
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<select class="form-control" name="car_id" ng-model="car_id" ng-options="I.car_brand_code as I.car_brand_name for I in CarList" ng-change="GetState(car_id)" >
<option value="">Select Car</option>
</select>
<div class="form-group">
<label class="mtb10">Model Year</label>
<input type="text" name="modelYear" class="form-control" ng-model="data.modelYear" placeholder="Car Year...">
</div>
</div>

Passing values to ng-model from ng-repeat

I have a form that passes its inputs to ng-model before storing to the database. One of which is a dynamic value (pre-generated code) that is taken from its database table.
<div class="form-group" ng-repeat="codes in response | filter: {branch: formData.branches.alias, taken: 0} | limitTo: 1">
<input class="form-control" type="text" name="code" ng-model="formData.code" ng-value="codes.code" readonly="" />
</div>
Theoretically, once the ng-model gets the value, it then passes it to the insert call for the database to store it along with the rest of the fields.
scope.processForm = function(isValid){
scope.$submitted = true;
if(isValid && state.$current=='registration.signupapp') {
http.post("server/insert.php",{'code': scope.codes.code, 'fullname': scope.formData.name, 'instagram': scope.formData.igname, 'email': scope.formData.email, 'mobile': scope.formData.mobile, 'location': scope.formData.location.type, 'branch': scope.formData.branches.branch}).success(function(data, status, headers, config){
console.log("inserted successfully");
});
state.go('registration.success');
} else if(!isValid) {
//alert("Please make sure that you entered everything correctly.");
}
};
Unfortunately, this does not work. 1) I was told that you cannot simply pass an ng-value to an ng-model inside an input[text]. 2) Even if in the case that the value is passed to ng-model, I am not sure what to call inside the controller as scope.codes.code nor scope.formData.code do not seem to work and gets either a not defined error or 404.
In a nutshell, how do I:
Get the value generated by ng-repeat as set to limitTo:1.
Store it to ng-model in real-time (as this is very dependent on a
dynamic dropdown).
Pass the value of ng-model back to the controller.
Send it back to the server and store it to the database.
I guess ng-init should help you out here.
Change your code segment from:
<div class="form-group" ng-repeat="codes in response | filter: {branch: formData.branches.alias, taken: 0} | limitTo: 1">
<input class="form-control" type="text" name="code" ng-model="formData.code" ng-value="codes.code" readonly="" />
</div>
to:
<div class="form-group" ng-repeat="codes in response | filter: {branch: formData.branches.alias, taken: 0} | limitTo: 1" ng-init="formData.code=codes.code">
<input class="form-control" type="text" name="code" ng-model="formData.code" readonly="" />
</div>
This is really contrived, but here's a very simplified demo:
var app = angular.module('demo', []);
app.filter('myFilter', function(){
return function(data){
return data[0];
};
});
app.controller('MainCtrl', ['$scope', '$filter', function($scope, $filter){
var myfilter = $filter('myFilter');
$scope.response = ['001', '002', '003', '004', '005'];
$scope.items = ['Item 1', 'Item 2', 'Item 3']
$scope.formData = {};
$scope.$watch('formData.select', function(newval){
if (newval === 'Item 1') {
$scope.formData.code = myfilter($scope.response);
} else {
$scope.formData.code = '';
}
});
}]);
#import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css";
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-app="demo" ng-controller="MainCtrl">
<pre>formData.code = {{formData.code || "No Code for this Item"}}</pre>
<div class="form-group">
<label>Select a Value: <em>Choose Item 1 to update formData.code</em></label>
<select class="form-control" ng-model="formData.select" ng-options="item as item for item in items"></select>
</div>
<div class="form-group">
<label>formData.code:</label>
<input class="form-control" type="text" name="code" ng-model="formData.code" />
</div>
</div>
You have the response already, so rather than use ng-repeat, just add the value to the formData.code on the controller. If you need to use a custom filter, you can pass in the $filter service as a dependency to your controller.
Edit:
I didn't notice the part about the formData.code being dependent on another form value, so I updated the demo to include a $watch function.

map bind with ng-model not updating data

I called REST service which gives me an Object contains a map.
Map in java looks like Map
Following is my js
$scope.marks = {};
//get data from rest
StudentService.query().$promise.then(function(data)
{
$scope.students = data;
for(var i=0;i<$scope.students.length;i++){
var obj = $scope.students[i];
//marks (key=studentName, value=mark in decimal)
$scope.marks[obj["studentName"]]=0.0;
}
following is my html
<div class="row" ng-repeat="(key,value) in marks">
<input type="text" class="form-control" ng-model="key" disabled>
{{marks[key]}} <!-- Here it is not updating value from above model-->
<input type="number" class="form-control" ng-model="value">
</div>
When I update value in textfield it is not update value displayed just below textfiled ie {{marks[key]}} is not showing updated value. Please correct me if wrong. Thank you :)
What you are passing to the ng-model is just a string, which is immutable. You need to define the ng-model like this:
<input type="number" class="form-control" ng-model="marks[key]">
angular.module('app', [])
.controller('Ctrl', function($scope) {
$scope.marks = {
mark1: 1,
mark2: 2,
mark3: 3
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="Ctrl">
<div class="row" ng-repeat="(key,value) in marks">
<input type="text" class="form-control" ng-model="key" disabled>{{marks[key]}}
<!-- Here it is not updating value from above model-->
<input type="number" class="form-control" ng-model="marks[key]">
</div>
</div>

How to get data from ngform in angularjs?

HTML:
<div ng-controller="TestController" >
<form name="test_form" ng-submit="submit()">
<input type="text" name="some_name" ng-model="form_data.some_name" required>
<ng-form ng-repeat="key in keys" name="keyForm">
<input type="text" name="data_input" ng-model="form_data.data_input" required>
</ng-form>
<a ng-click="addKey()">NEW KEY</a>
</form>
</div>
JS:
app.controller('TestController', function TestController($scope){
$scope.keys = [];
$scope.addKey = function() {
$scope.keys.push({});
}
$scope.submit = function() {
console.log($scope);
}
});
In submit function I can get the value of "some_name" input:
$scope.submit = function() {
console.log($scope.form_data.some_name);
}
But I can't get the values of "data_input" inputs (they are inside ngform tag). How to do that?
(ngform tag is using for ability to validate each new added input separately)
Each input inside the ng-repeat needs its own unique ng-model property -- they all can't use form_data.data_input. Here is one way to solve your problem:
<ng-form ng-repeat="key in keys" name="keyForm">
<input type="text" name="data_input" ng-model="key.data" required>
</ng-form>
$scope.addKey = function () {
$scope.keys.push({ data: ''});
}
Fiddle.
See also https://stackoverflow.com/a/14379763/215945

Resources