I am using an javascript object as model for select menu, and ng-options also have object as the value property. I want the select menu to be pre-selected based on the model value.
My html code,
<!DOCTYPE html>
<html>
<head>
<script src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3" data-require="angular.js#*"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body data-ng-app="myApp" data-ng-controller="MyCtrl as vm">
<select data-ng-model="vm.model" data-ng-options="option as option.studentName for option in vm.options"></select>
<br>
<div>Model : {{vm.model}}</div>
<br>
<div>Options :<br>[ <div data-ng-repeat='option in vm.options'>{{option}}</div></div>
]
</body>
</html>
Script,
// Code goes here
angular.module('myApp',[]);
angular.module('myApp').
controller('MyCtrl',MyCtrl);
function MyCtrl(){
var vm = this;
vm.model = {studentId:1,studentName:'Dheepan'};
vm.options = [{studentId:1,studentName:'Dheepan'},
{studentId:2,studentName:'Raju'}
];
}
Plunker here.
I can understand that since ng-model and option are having different reference, it is not getting selected by default. Is there any way to do it?
You can to use track by to define with field will be finded:
<select data-ng-model="vm.model"
data-ng-options="option as option.studentName for option in vm.options track by option.id"></select>
(your updated jsfiddle: http://embed.plnkr.co/6zNpJA4AsY50bpOQwnLl/preview)
You have to use option.studentId as option.studentName to bind studentId for selected studentName.
here is updated plunker
Try this :
<select data-ng-model="vm.model" data-ng-change="vm.changeStudent(vm.model)" data-ng-options="option.studentId as option.studentName for option in vm.options"></select>
I added ng-change to bind value and display on page.
Related
I have a input text like in one page. I would like to store the information from this input with angular, so when moving to another page I could display it in another input text.
I have tried with ng-model and ng-init
<input type="text" ng-model="inputText" ng-init="userText">
Having in the controller
$scope.userText = $scope.inputText;
But it doesn't seem to work. You can see a working plunker here. Thanks in advance!
PS: I need to do it between two pages (not with a single page and then routing).
basically what happens is that your variables are reseted when you change page. You can achieve what you want using localstorage. Here follows an example
JS:
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.saved = localStorage.getItem('userText');
$scope.userText = (localStorage.getItem('userText')!==null) ? $scope.saved : "";
$scope.editText = function(){
localStorage.setItem('userText', $scope.userText);
}
});
PAGE 1:
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
Home
Another page<br><br><br>
<input type="text" ng-model="userText" ng-keyup="editText()">
</html>
PAGE 2:
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
Home
Another page<br><br><br>
<input type="text" ng-model="userText" ng-keyup="editText()">
<h1>This is Another Page!</h1>
</body>
</html>
please check this plunker: http://plnkr.co/edit/eyywQGgWjhC8gS7Wprcw?p=preview
You can store in rootscope/ localstorage/ URL as parameter . The retrieve value on your destination page
How can I create dynamic ng-models in Angular? I tried but I think I'm having a hard time getting it to run. All I get is undefined. Here's my code.
<input type="text" class="form-control input-sm" ng model="teller[value.teller_id]" value="<% value.mac_address %>">
I am planning to have a ng-model that has the same name but only changes by number. I have an object that holds the number from 1-4. which is value.teller_id. I want to append it to the ng-model as teller1,teller2,teller3 (teller[value.teller_id] etc.. It is looped by ng-repeat which I don't have any problem but rather creating the dynamic ng-model and changing the number will yield undefine.
ng model="teller[value.teller_id]" <---- doesn't work
I want to achive teller1, teller2 etc..
Thanks!
Yes. We can generate ng-model name dynamically.
var app = angular.module('myApp', []);
app.controller('MainCtrl', function($scope) {
$scope.teller = {};
$scope.name = [{
"id":1
},{
"id":2
}]
});
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28/angular.min.js"></script>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<div ng-repeat="x in name">
<input type="text" ng-model="teller[x.id]" />
</div>
<pre>{{teller | json}}</pre>
</body>
</html>
Hope it works for your case :)
Input field contains JSON data set from some other script.I have to access in controller.How can I access it in controller.Code I am using something like this-
<html>
<head>
<title>Angular JS Controller</title>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="" ng-controller="studentController">
Enter first name: <input class="get" type="text" ng-model="student">
</div>
<script>
function studentController($scope) {
console.log($scope.student);
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>
With Angular, the controller is who tells the View what the default value should be (not the other way around). The View would reflect that, and could update it (with ng-model), but it is initially set by the controller.
So, the controller knows because the controller sets it up:
.controller("studentController", function($scope){
$scope.student = "default name";
});
I'm trying to change a checkbox value based on another checkbox value, but the change doesn't seem to have any effect in the model.
Here is a code example of the issue:
http://plnkr.co/edit/eFOn3cejwKU01LkKNC1s?p=preview
HTML file
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="1.2.0-rc3-nonmin" src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>
<link data-require="bootstrap-css#*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="main" ng-controller="DemoCtrl">
<pre>
A value: {{a}}
B value: {{b}}
</pre>
A <input type="checkbox" ng-model="a" />
B <input type="checkbox" ng-model="b"
ng-disabled="a"
ng-checked="!a && b"
/>
</body>
</html>
And an empty controller:
var app = angular.module('main', [])
.controller('DemoCtrl', function($scope) {
});
As far as I've read, a Dom change doesn't change the model, and when I try to call $apply, the digest is already running, so I'm a bit lost.
I don't want to put a $watch on the first checkbox because my example is already quite complex.
Is there any alternative solution that does not involve writing js code in the controller for this problem?
Please see http://plnkr.co/edit/lbOWO4oLbTghactUETTD?p=preview
You missed reference to script
<script src="//cdn.jsdelivr.net/angular.ngtable/0.3.3/ng-table.js"></script>
Here is a plunker showing a way to set the b value in the model to false when a is clicked and set to true, without modifying the controller.
http://plnkr.co/edit/rL6tTp5NfBzroZ2zSOgO?p=preview
And here is what I modified to do it - see the ng-change
A <input type="checkbox" ng-model="a" ng-change="b=!a" />
I have a table of objects with checkbox inputs. If an object's checkbox is checked, the object.isChecked value is set to true, and if it's unchecked then the value is set to false. However, I have a master checkbox that checks/unchecks all the checkboxes in the table. This does not update the object.isChecked values however. How would I make the master checkbox change the object.isChecked values?
The problem must be you trigger checkboxes not inside Angular. If you want Angular magic to work - you must do all your model manipulations inside Angular scope. I've created a plunker to demonstrate.:
index.html
<!DOCTYPE html>
<html data-ng-app="demo">
<head>
<script data-require="jquery#1.9.0" data-semver="1.9.0" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.js"></script>
<script data-require="angular.js#*" data-semver="1.0.7" src="http://code.angularjs.org/1.0.7/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body data-ng-controller="DemoController">
<div data-ng-repeat="object in objects">
{{object.name}}: <input type="checkbox" data-ng-model="object.isChecked">
</div>
Master: <input type="checkbox" data-ng-click="triggerAll()">
{{objects}}
</body>
</html>
script.js
"use strict";
var demo = angular.module("demo", []);
function DemoController($scope) {
$scope.objects = [
{
name : "First",
isChecked : true
},
{
name : "Second",
isChecked : false
}
]
$scope.triggerAll = function(){
angular.forEach($scope.objects, function(value){
value.isChecked = !value.isChecked;
})
}
}
Pay attention that triggering all checkboxes is done with ngClick, not with usual onClick or jQuery handler. This allows Angular to run dirty checks and behave correctly.