We Keep Coding

Get value input form

I would like to retrieve the password value type for the display in the console.log .
I use a html form with ng-model="passwd" to retrieve the value.
And I then uses a controller with $scope.passwd=null; to retrieve the input field.
For now, $scope.passwd remains null in google chrome => Console
'use strict';
angular.module('djoro.controllers')
.controller('WifiSmartConfigCtrl', function($scope, $window, $ionicPlatform){
$scope.passwd = null;
$scope.startSmartconfig = function(passwd){
var onSuccess = function(success){
$scope.passwd = passwd;
};
var onFail = function(){};
$ionicPlatform.ready(function(){
$window.cordova.plugins.Smartconfig.startSmartconfig(onSuccess, onFail, $scope.passwd);
console.log('Password = ' + $scope.passwd);
});
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<form name="wifi_form" class="simple-form">
<div class="list input-fields">
<label class="item item-input" show-hide-container>
<span class="input-label">Password : </span>
<input type="password" name="password" ng-model="passwd" id="passwd" show-hide-input>
</label>
</div>
</form>
<div class="startWifi">
<button class="button button-full button-balanced" ng-click="startSmartconfig()">Start</button>
</div>
Someone an idea to edit the entered value ?
Thank you

Replace $scope.passwd = null; to $scope.passwd = '';
You are using ng-click="startSmartconfig()" and passing nothing but in controller, you have used $scope.startSmartconfig = function(passwd){ so this code will not work.
Set controller function to $scope.startSmartconfig = function(){ and another thing is angularjs is two way binding means when you add value in input text with ng-model="passwd", it also bind the textbox value to $scope.passwd.

I am not aware of $window.cordova thing but what I observed is you didn't pass passwd in ng-click="startSmartconfig()" in html and you are assigning the passwd to $scope.passwd which will be undefined.
And no need to pass passwd in function. You can directly get updated value in $scope.passwd

Angularjs ng-required call function

It is possible make the required value dependet of some funcion?
Something like this? I want to do this because I want to change the required attribute to some form inputs...
HTML:
Name: <input type="text" ng-model="user.name" ng-required="isRequired('name')" />
Age: <input type="text" ng-model="user.age" ng-required="isRequired('age')" />
JS:
$scope.isRequired(fieldName){
$scope.requiredFields = [];
//$scope.requiredFields = STUFF FROM SOME REST SERVICE
for (i in requiredFields) {
if (requiredFields[i] == fieldName){
return true;
}
}
return false;
}

Updated Answer:
So based on your updated OP, what you want is certainly doable. The problem with what you were trying to do is that ng-required has no ability to execute a function, it only reads a boolean. But we can dynamically create variables based on data from the server to automatically set fields to required:
Updated Plunker
<form>
Name: <input type="text" ng-model="user.test" ng-required="name" /><br/>
<input type="text" ng-model="user.name" ng-required="age" />
<br/>
<button type="submit">Submit</button>
</form>
Note that I put a $scope property for each input in the ng-required attribute. Now we can dynamically create that $scope property and set it to true if our data says we need to:
$scope.isRequired = function(){
$scope.requiredFields = [];
$http.get('fields.json')
.success(function(data){
$scope.requiredFields = angular.fromJson(data);
console.log($scope.requiredFields.required)
for (i = 0; i < $scope.requiredFields.required.length; i++) {
$scope[$scope.requiredFields.required[i]] = true
}
console.log($scope[$scope.requiredFields.required[0]]);
})
//$scope.requiredFields = STUFF FROM SOME REST SERVICE
}
$scope.isRequired()
So it is iterating over an array of required fields received from the server, and then dynamically creating a $scope property for each one that is required, and setting it to true. Any field that has that $scope property in it's ng-required will be required now. Anything not dynamically created will just return false, and ng-required doesn't trigger.
Original answer:
Plunker
As Pratik mentioned, ng-required only accepts a Boolean value, but we can toggle the value of that with a function.
HTML
<form>
Name: <input type="text" ng-model="user.name" ng-required="isRequired" />
<br/><button ng-click="toggle()">Required: {{isRequired}}</button>
<button type="submit">Submit</button>
</form>
code:
$scope.isRequired = true;
$scope.toggle = function() {
$scope.isRequired = !$scope.isRequired;
}

I know this is a couple of years old and so AngularJS may have changed, but the accepted answer as it stands today isn't correct. You can very easily execute a function within ng-required, as it takes an expression, which can be a function. For example:
index.html
<div ng-controller="ExampleController" class="expressions">
Expression:
<input type='text' ng-model="expr" size="80"/>
<button ng-click="addExp(expr)">Evaluate</button>
<ul>
<li ng-repeat="expr in exprs track by $index">
[ X ]
<code>{{expr}}</code> => <span ng-bind="$parent.$eval(expr)"></span>
</li>
</ul>
</div>
script.js
angular.module('expressionExample', [])
.controller('ExampleController', ['$scope', function($scope) {
var exprs = $scope.exprs = [];
$scope.expr = '3*10|currency';
$scope.addExp = function(expr) {
exprs.push(expr);
};
$scope.removeExp = function(index) {
exprs.splice(index, 1);
};
}]);
In script.js, a function addExp is defined and added to the scope, and then it's called in the ng-click directive of the a tag, which also takes an expression as its argument.
This code is taken directly from the AngularJS documentation on expressions. It doesn't use ng-require directly, but any directive that takes an expression will work the same. I have used the same syntax to use a function for ng-require.

Angularjs - assigning logic between two models

I am new to Angular. It is a very simple question -
in my index.html I am defining two models on two text boxes :-
<html><head><script...></head><body ng-app="myApp"ng-controller="MainController" >
<input ng-model="tb1" type="text" name="numberofusers"/>
<input ng-model="tb2" type="text"></input>
</body></html>
And in my app.js I am defining like this
var app = angular.module('myApp', []);
app.controller('MainController', ['$scope', function($scope){
$scope.tb1 = $scope.tb2;
}]);
Now, what I want is that whatever I type in first text box (tb1) automatically typed to second text box (tb2) and vise-versa, but that is not happening.
Any guess ?

Your code in controller $scope.tb1 = $scope.tb2; would only be executed once (when controller initializes), that's why it doesn't work.
You need to bind input elements to the same model then Angular will handle two-way binding for you automatically.
<input ng-model="tb1" type="text" name="numberofusers"/>
<input ng-model="tb1" type="text"></input>
Or if you want to use two different models for different elements, you can add a hook to input's ng-change event listener like
<input ng-model="tb1" type="text" name="numberofusers" ng-change="tb2 = tb1"/>
<input ng-model="tb2" type="text" ng-change="tb1 = tb2"></input>
Then these two elements would sync automatically. But you know what, ng-change can only monitor user input change, that means, if you change tb1 or tb2 programmably, ng-change will not be triggered.
In this case, you should monitor model's change using $scope.$watch
$scope.$watch('tb1', function(newValue) {
$scope.tb2 = newValue;
}));
Currently it's beyond your requirement.

This is because controller will only execute once and if there is any value in $scope.tb2 will assign to $scope.tb1 but intially both of them are blank .
So you need to $watch the changes and assign value to each other like :-
$scope.$watch('tb1',function(newVal){
$scope.tb2=newVal;
})
$scope.$watch('tb2',function(newVal){
$scope.tb1=newVal;
})
And if you want to manage it on front end you can use ng-change directive like
<input ng-model="tb1" type="text" ng-change="tb2=tb1" name="numberofusers"/>
<input ng-model="tb2" type="text" ng-change="tb1=tb2"></input>

You can use two-way binding to achieve that. An example is: JSFiddle
Create your directive:
var app = angular.module('myApp', []);
app.controller("myCtrl", function($scope) {
$scope.myName = 'Carl';
}).directive("myDirective", function() {
return {
restrict: 'AE',
scope: {
twowayBindingProp: '=myName'
}
}
});
And bind it through:
<div ng-app="myApp">
<div ng-controller="myCtrl">
<h1>From parent: </h1>
<h3>parentProp2: <input ng-model="myName"></h3>
<div my-directive my-name="myName">
<h1>From child: </h1>
<h3>twowayBindingProp: {{ twowayBindingProp }}</h3>
<h1>Set from child:</h1>
twowayBindingProp： <input ng-model="twowayBindingProp">
</div>
</div>
</div>

Angular.js : How to bind "change" event to service

First of all, I'm new to angular.js...
I have a HTML5 page where I can add new URLs with a name. Now, I want to have a check to a back-end service to check if the URL already exist. How can I bind the “onChange” event on the input boxes to a service function?
I have tried to find the solution, but I have not been able to find anything that describes this easily.
<div ng-controller="newLink">
<input class="url" value="{{Url}}" ng-model="Url" placeholder="Please type a URL"/>
<input class="name" value="{{Name}}" ng-model="Name" placeholder="Type a name" />
<div class="status"></div>
</div>
<script>
app.controller('newLink', ['$scope', 'appService', function ($scope, appService) {
$scope.Name = '';
$scope.Url = '';
}]);
</script>

You can use the ngChange directive
<input ng-change="onChange()">
// in controller
$scope.onChange = function(){
// call your service function here
}
For further information, see: http://docs.angularjs.org/api/ng/directive/ngChange

Two simple solutions to this problem:
use ng-change directive:
<input ng-change="doSomething()">
$scope.doSomething = function() {};
$watch value change
<input ng-model="Url">
$scope.$watch('Url', function() {});

How can I access field in ng-repeat in a dynamic way?

I need to elaborate some functions in a ng-repeat, but i can't access the right field with the $watch function.
This is my code but prolly I access the field in a wrong way that cause me Javascript error of undefined.
.html
<body ng-controller="MainCtrl">
<div ng-form="mainForm">
<a ng-click="addNewr1()">Add New r1</a>
<ul>
<li ng-repeat="rb_r1 in currForm.r1" ng-form="subFormr1">
<input type="number" step="0.1" ng-model="rb_r1.runo" name="r_runo" required />
<input type="number" step="0.1" ng-model="rb_r1.rdue" name="r_rdue" required />
<input type="number" step="0.1" ng-model="rb_r1.rsomma"/>
</li>
</ul>
</div>
</body>
.js
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function ($scope) {
$scope.master = {};
$scope.currForm.r1 = [];
$scope.addNewr1 = function (){
$scope.currForm.r1.push({ runo: 0,rdue: 0,rsomma: 0 });};
$scope.$watch('rb_r1.runo + rb_r1.rdue', function (value) {
$scope.rb_r1.rsomma= value;
}, true);
});
So I found a fiddle and modifying it I get the solution, but in a limited way, cause I had to access to the field in a static way. How can i do that in a dinamic way?
http://jsfiddle.net/fe9ws/
TY All!

I am still not clear on what you attempted to do but you do not need a $watch for the task described:
Since "somma" is a calculated You can define your field like this and it will produce the desire result:
<input type="number" name="somma" value="{{social.uno + social.due}}">

I resolved with a for in the $watch function..
$scope.$watch('formData.socials',
function(value){
var i;
for(i = 0; i < value.length; i++)
value[i].somma = value[i].uno + value[i].due;
}, true);
see the fiddle! Ty all
http://jsfiddle.net/JWTE2/