When I execute this script, aForm.aField.$error contains {"required":true} BUT $scope.fruit is not set to undefined even though it is not in the md-option values. So the "required" validation is done but not the set to undefined.
<!doctype html>
<html ng-app="anApp">
<head>
<link rel="stylesheet" href="bower_components/angular-material/angular-material.min.css">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-messages/angular-messages.min.js"></script>
<script src="bower_components/angular-material/angular-material.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<script src="bower_components/angular-aria/angular-aria.min.js"></script>
<script>
angular.module('anApp', ['ngMessages', 'ngMaterial'])
.controller('aController', function ($scope, $timeout) {
$scope.fruitBasket = [{name:"apple", id:1}];
$scope.fruit = 100;
$scope.required = true;
});
</script>
</head>
<body ng-controller="aController">
{{aForm.aField.$error}}<br> [{{fruit}}]
<br>
<form name="aForm">
<md-input-container>
<label>Fruit</label>
<md-select name="aField" ng-required="required" ng-model="fruit">
<md-option ng-repeat="unFruit in fruitBasket" ng-value="unFruit.id"> {{unFruit.name}} </md-option>
</md-select>
<div ng-messages="aForm.aField.$error">
<div ng-message="required">Fruit required</div>
</div>
</md-input-container>
</form>
</body>
</html>
But when I execute this script, $scope.fruit is set to undefined after the timeout is executed:
<!doctype html>
<html ng-app="anApp">
<head>
<link rel="stylesheet" href="bower_components/angular-material/angular-material.min.css">
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-messages/angular-messages.min.js"></script>
<script src="bower_components/angular-material/angular-material.js"></script>
<script src="bower_components/angular-animate/angular-animate.min.js"></script>
<script src="bower_components/angular-aria/angular-aria.min.js"></script>
<script>
angular.module('anApp', ['ngMessages', 'ngMaterial'])
.controller('aController', function ($scope, $timeout) {
$scope.fruitBasket = [{name:"apple", id:1}];
$scope.fruit = 100;
$scope.required = false;
$timeout(function() {
$scope.required = true;
}, 1000);
});
</script>
</head>
<body ng-controller="aController">
{{aForm.aField.$error}}<br> [{{fruit}}]
<br>
<form name="aForm">
<md-input-container>
<label>Fruit</label>
<md-select name="aField" ng-required="required" ng-model="fruit">
<md-option ng-repeat="unFruit in fruitBasket" ng-value="unFruit.id"> {{unFruit.name}} </md-option>
</md-select>
<div ng-messages="aForm.aField.$error">
<div ng-message="required">Fruit required</div>
</div>
</md-input-container>
</form>
</body>
</html>
When I look at angular's code, when invoking $$runValidators, there's this "prevValid" condition that seems to influence the "set to undefine" mecanism.
So it seems md-select (because of angular) is not always setting the model to undefined when it is not a valid value.
What should I do if I want my first script (the one without the timeout) to set the model to undefined because its value is not in the md-option values?
Are these behaviors documented somewhere?
What are the rules?
well finally I've found the answer in angular doc...
Runs each of the registered validators (first synchronous validators and then asynchronous validators). If the validity changes to invalid, the model will be set to undefined, unless ngModelOptions.allowInvalid is true. If the validity changes to valid, it will set the model to the last available valid $modelValue, i.e. either the last parsed value or the last value set from the scope.
It's the fact that the validity state changes from true to false when the field is set to required.
Related
am struggled in md-select model update when user changes the value need to update the flag as true.Actually i have to iterate the length of the model in md-select and in md-options i show like 1,2...5. if user changes the value in drop down means respective flag set to true other should be in false.kindly help me out this problem. following is my code and kindly tell me where i did the logical mistake:
<html lang = "en">
<head>
<link rel = "stylesheet"
href = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<link rel = "stylesheet" href = "https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
</style>
<script language = "javascript">
angular
.module('testApp', ['ngMaterial'])
.controller('myCTRL', myCTRL);
function myCTRL ($scope) {
$scope.chooseValue =false;
$scope.selectedValue = 1;
$scope.testValue = [
{ isEnabled: false},
{ isEnabled: false },
{ isEnabled: false }
];
$scope.submitvalue = function(){
console.info($scope.testValue)
$scope.testValue[$scope.selectedValue].isEnabled = true;
console.info($scope.finalvalue)
}
}
</script>
</head>
<body ng-app = "testApp">
<div id = "inputContainer" class = "inputDemo"
ng-controller = "myCTRL as ctrl" ng-cloak>
<form role="form" name="deviceForm">
<div>
<md-input-container >
<label>select flags want to enable</label>
<md-select ng-model="selectedValue" >
<md-option ng-repeat="(key,value) in testValue">{{key}}</md-option>
</md-select>
</md-input-container>
</div>
</form>
<input type="submit" ng-click="submitvalue()">
</div>
</body>
</html>
Thanks in advance.
You can simply create a new copy of testValue object into finalValue variable, then do the boolean assignments in that and use. Please refer the below code.
console.info($scope.testValue)
$scope.finalValue = angular.copy($scope.testValue);
$scope.finalValue[$scope.selectedValue].isEnabled = true;
console.info($scope.finalValue)
We create a new copy of testValue using method angular.copy() and assign it to final value. Then we use your logic to assign the respective indexed boolean to true.
The problem with your original code, is that you are showing finalValue, without it being even defined as a variable and also no data manipulations were done to it!
Please refer the below working snippet, and let me know if you face any issues implementing the below code!
angular
.module('testApp', ['ngMaterial'])
.controller('myCTRL', myCTRL);
function myCTRL($scope) {
$scope.chooseValue = false;
$scope.finalValue = {};
$scope.selectedValue = 1;
$scope.testValue = [{
isEnabled: false
},
{
isEnabled: false
},
{
isEnabled: false
}
];
$scope.submitvalue = function() {
console.info($scope.testValue)
$scope.finalValue = angular.copy($scope.testValue);
$scope.finalValue[$scope.selectedValue].isEnabled = true;
console.info($scope.finalValue)
}
}
<html lang="en">
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
</style>
</head>
<body ng-app="testApp">
<div id="inputContainer" class="inputDemo" ng-controller="myCTRL as ctrl" ng-cloak>
<form role="form" name="deviceForm">
<div>
<md-input-container>
<label>select flags want to enable</label>
<md-select ng-model="selectedValue">
<md-option ng-repeat="(key,value) in testValue">{{key}}</md-option>
</md-select>
</md-input-container>
</div>
</form>
<input type="submit" ng-click="submitvalue()">
</div>
</body>
</html>
I'm testing the cookies of angularjs. Am I wondering why it's returning undefined in the console? When I set or save value using the $cookieStore.put() is working then when in getting the value from the cookie it's returning undefined.
<!DOCTYPE html>
<head runat="server">
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular-cookies.js"></script>
<script>
angular.module('app', ['ngCookies']).controller('MyController', ['$scope','$cookieStore', function($scope, $cookieStore) {
$scope.WriteCookie = function() {
$cookieStore.put('visited', $scope.yes);
console.log($cookieStore.get('visited'));
}
$scope.ReadCookie = function() {
$cookieStore.get('visited');
console.log($cookieStore.get('visited'));
}
}]);
</script>
</head>
<body ng-app="app">
<form>
<div ng-controller="MyController">
<input type="button" value="Write Cookie" ng-click="WriteCookie()" />
<input type="text" ng-model="yes" />
<input type="button" value="Read Cookie" ng-click="ReadCookie()" />
<input type="text" ng-model="cookie" />
</div>
</form>
</body>
</html>
Try like this :
update cookie version 1.6.6 and use $cookies instead of $cookieStore
angular.module('myApp', ['ngCookies'])
.controller('myController', ['$cookies', function($cookies) {
$cookies.put('myFavorite', 'oatmeal');
var favoriteCookie = $cookies.get('myFavorite');
console.log('favoriteCookie', favoriteCookie);
}]);
I tested your code two ways. Opening it as file and from server. In the first case I get 'undefined' whereas in second case it reads the cookie as expected. I did some digging and looks like some browser including Chrome does not allow setting cookies for a page opened as a file. More info ...
This is a problem that can be easily done by declaring a scope function but I was wondering if there is a better way to make this easier
The code is:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body ng-controller="myCtrl">
<input type="checkbox" ng-model="activate" id="activate"> ACTIVATE <br />
<input type="text" ng-model="first" ng-disabled="!activate">
<input type="text" ng-model="second" ng-disabled="!activate">
<!-- <span id="clickMe">Click Me!</span> -->
<script type="text/javascript">
app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $timeout){
});
</script>
</body>
</html>
So this is the case. The other two fields will be enabled if the checkbox is checked and true and will be disabled if the checkbox is unchecked. What I want is, to make the fields go null or blank automatically upon disabling.
Here is an example: http://plnkr.co/edit/2EPuhRiR9OncV8z7q018?p=preview
Ignoring the fact that it is not a good practice to put too much logic directly in the view, a technical solution would be:
<input type="checkbox" ng-model="activate" id="activate" ng-change="sameAsAbove(first, second); value = null"> ACTIVATE <br />
<input type="text" ng-model="value.first" ng-disabled="!activate">
<input type="text" ng-model="value.second" ng-disabled="!activate">
I have to listen to the angular strap date time picker value change from jquery
(Cannot add code in the angular application/controllers or use anuglar code).
Please provide a way to do it by using Jquery/JScript only. Many thanks
AngularStrap DatetimePicker Documentation
What I tried
$("#datepk").bind('input', function(){alert('value changed');})
$("#datepk").bind('change', function(){alert('value changed');})
$("#datepk").bind('DOMSubtreeModified', function(){alert('value changed');})
Above methods are not working. Also, one more thing is val() function is returning the value but when I am trying to get the value from .attr('value') then it's undefined.
$("#datepk").val(); /// nicely retruning the value
$("#datepk").attr('value'); /// returning undefined
dummy application
<htm>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.3.8/angular-strap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.3.8/angular-strap.tpl.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script>
var myapp = angular.module('myapp', ['ngAnimate', 'mgcrea.ngStrap']);
myapp.config(function($datepickerProvider) {
angular.extend($datepickerProvider.defaults, {
dateFormat: 'dd/MM/yyyy',
startWeek: 1
})
});
myapp.controller('myctrl', ['$scope', '$datepicker',
function($scope, $datepicker) {
$scope.selectedDate = "2016-04-28T09:57:58.274Z"; // <- [object Date]
$scope.selectedDateAsNumber = 509414400000; // <- [object Number]
$scope.fromDate = "2016-04-08T18:30:00.000Z"; // <- [object Date]
$scope.untilDate = ''; // <- [object Undefined]
}
]);
</script>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<form name="datepickerForm" class="form-inline" role="form">
<!-- Basic example -->
<div class="form-group" ng-class="{'has-error': datepickerForm.date.$invalid}">
<label class="control-label"><i class="fa fa-calendar"></i> Date <small>(as date)</small>
</label>
<input id="datepk" type="text" class="form-control" ng-model="selectedDate" name="date" bs-datepicker>
</div>
</form>
</body>
</htm>
Why not you call JavaScript function whenever date changed.
var myapp = angular.module('myapp', ['ngAnimate', 'mgcrea.ngStrap']);
myapp.config(function($datepickerProvider) {
angular.extend($datepickerProvider.defaults, {
dateFormat: 'dd/MM/yyyy',
startWeek: 1
})
});
myapp.controller('myctrl', ['$scope', '$datepicker',
function($scope, $datepicker) {
$scope.selectedDate = "2016-04-28T09:57:58.274Z"; // <- [object Date]
$scope.selectedDateAsNumber = 509414400000; // <- [object Number]
$scope.fromDate = "2016-04-08T18:30:00.000Z"; // <- [object Date]
$scope.untilDate = ''; // <- [object Undefined]
}
]);
$(document).ready(function() {
$("#datepk").on("click", function() {
$(".datepicker table tr td").on("click tap", function(event) {
alert($("#datepk").val())
})
})
})
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.3.8/angular-strap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-strap/2.3.8/angular-strap.tpl.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="script.js"></script>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<form name="datepickerForm" class="form-inline" role="form">
<!-- Basic example -->
<div class="form-group" ng-class="{'has-error': datepickerForm.date.$invalid}">
<label class="control-label"><i class="fa fa-calendar"></i> Date <small>(as date)</small>
</label>
<input id="datepk" type="text" class="form-control" ng-model="selectedDate" name="date" bs-datepicker>
</div>
</form>
</body>
</html>
I think the below points will help you.
Add ng-change to your input.
<input id="datepk" type="text" class="form-control" ng-model="selectedDate" name="date" bs-datepicker ng-change="myChange()">
and in your controller add:
$scope.myChange= function(){
console.log($scope.selectedDate);
};
ng-change will call myChange every time when the value changes.
im using this plunker autocomplete
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://code.angularjs.org/1.2.19/angular.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/angular.bootstrap/0.11.0/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body onload='init()'>
<div id='container' ng-controller='TypeaheadCtrl'>
<h3 class="ng-binding">Item Name: {{item.name}}</h3>
<h3 class="ng-binding">Item Id: ({{item.id}})</h3>
<input id='itemInput' type="text" ng-model="item" placeholder="Item Name" typeahead="item as item.name for item in items | filter:$viewValue" class="form-control">
</div>
</body>
</html>
in my project , i face problem when i try to edit i fill the input automaticly so the problem is i just get text and all the object in ng-model
for example in the link above if i copy the world Chicken and paste it in input it will not give me the object it will be just text ,
if i insert the world c and choice the option Chicken i will get in ng-model the object (that contain id and name)
Look at working example,
http://plnkr.co/edit/Z930HmH83KIENuEjWhx3?p=preview
I have change your code a bit and made it angular code rather than java script code.
I hope it will work. I have taken your json in .json file and using $http service made call to that json.
var app = angular.module('myApp', ['ui.bootstrap']);
app.factory('autoComplete',function($http){
return{
load:function(){
$http.get('data.json').success(function (data){
sessionStorage.setItem( 'items', JSON.stringify(data) );
})
}
}
})
app.controller('TypeaheadCtrl',function($scope,$http,autoComplete){
$scope.selected = undefined;
$scope.items = JSON.parse(sessionStorage.getItem('items'));
});
I hope that little modification to this solution would take you to your required solution.
HERE is the working plunker PRESS STOP THEN RUN, BUG IN PLUNKER : http://plnkr.co/edit/QGqDjhzcFVNSHxA2hmHM?p=preview
It should be ng-bind not ng-binding and it shouldn't be class = ng-binding (angular directives are not css classes) it should be Item name: <h3 ng-bind="item.name"></h3>. Here's an example from the angularJS website:
<script>
angular.module('bindExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.name = 'Whirled';
}]);
</script>
<div ng-controller="ExampleController">
<label>Enter name: <input type="text" ng-model="name"></label><br>
Hello <span ng-bind="name"></span>!
</div>
and here's your code edited:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://code.angularjs.org/1.2.19/angular.min.js"> </script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/angular.bootstrap/0.11.0/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body onload='init()'>
<div id='container' ng-controller='TypeaheadCtrl'>
Item name: <h3 ng-bind="item.name"></h3>
Item ID: <h3 ng-bind="item.id"></h3>
<input id='itemInput' type="text" ng-model="item" placeholder="Item Name" typeahead="item as item.name for item in items | filter:$viewValue" class="form-control">
</div>