Develop Reference

AngularJS passing data to Javascript variables and opposite

I am looking for a solution on passing data from a specific input text field to AngularJS. it may be a Javascript variable too. If the variable is changed from inside a javascript code it is not updating on AngularJS side. If i take the same variable and in the text field add at least one character or modify something i see variable updating and everything working as it should.
I tried something with angular.element(document.getElementById('ControllerElementID')).scope().funct(); but still no luck. When i update at least one field from the keyboard, all text fields that are related to "ng-model="sig.sigBase6422"" are updating properly as it should. If i call this updates through a JavaScript function i see updates only on specific text field and no updates at all on ng-model happening. How to make it updating as simple as possible? Below i will post a small example. I was able to store data from variable to a external file and in AngularJS read it from file and use it. this is way too long, complicated and ridiculous. I am sure there should be a better way.
Thank you!
<script type="text/javascript">
function addtext1() {document.getElementById("myID1").value = "1111111111111111";}
function addtext2() {document.getElementById("myID2").value = "2222222222222222";}
</script>
<div>
<form action="#" name="FORM1">
<TEXTAREA NAME="sigData" ng-model="sig.sigBase6422" ROWS="10" COLS="20">String: </TEXTAREA>
</form><br>
<input type="text" name="myID1" id="myID1" ng-model="sig.sigBase6422" ><br>
<input type="text" name="myID2" id="myID2" ng-model="sig.sigBase6422" ><br>
<p>Value {{sig.sigBase6422}}!</p>
</div>
<!-- test field -->
Add text 1
Add text 2

Indeed if you want to use AngularJS for what it was created, you have to rewrite your code completely using directive or controller. You variables and functions accessible from the view should be attached to the $scope too.
var myApp = angular.module("myApp", []);
myApp.controller("myCtrl", function($scope){
$scope.addtext1 = function () {
$scope.sig.sigBase6422 += "1111111111111111";
};
$scope.addtext2 = function () {
$scope.sig.sigBase6422 += "2222222222222222";
};
$scope.sig = {
sigBase6422: ""
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<form action="#" name="FORM1">
<TEXTAREA ng-model="sig.sigBase6422" ROWS="10" COLS="20">String: </TEXTAREA>
</form><br/>
<input type="text" name="myID1" id="myID1" ng-model="sig.sigBase6422" /><br/>
<input type="text" name="myID2" id="myID2" ng-model="sig.sigBase6422" /><br/>
<p>Value {{sig.sigBase6422}}!</p>
<!-- test field -->
<button ng-click="addtext1()">Add text 1</button>
<button ng-click="addtext2()">Add text 2</button>
</div>

You seem to have misunderstood how angular works. What you're trying to do is not how angular works. What you're trying to do with native JavaScript can be done with angular. Angular can update dom and Dom updates angular as it's responsible for causing updates.... anyway without getting any deeper. You need to read more on how angular works and try sticl within the bounds of angular instead of mixing.
That being said :
Tigger change on the Dom element after you have updated its value. Or better yet get access to scope variable on the Dom and call a function in angular with the value you're and set they value from inside of a angular.

Use this code while updating the value.
pick the controller first using
var scope = angular.element(document.getElementById('yourControllerElementID')).scope();
scope.<variablename> = <your operation>;
then
scope.$apply();
the remaining thing will be taken care by Angular.

Form validity using Angular ng-repeat

I have an Angular form that is parsing some JSON data.
I'm rendering using ng-repeat. However, I'm having an issue in that the form never becomes valid when a radio button in each group is selected.
I suspect the issue lies with the ng-model in each input, but I can't seem to figure out the correct way to dynamically create an ng-model inside an ng-repeat.
Form block code:
<form name="posttestForm">
<alert ng-repeat="alert in alerts"
type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</alert>
<div class="well question-well" ng-repeat="question in questions">
<p>
<strong>{{question.question}}</strong>
</p>
<ul>
<li ng-repeat="answers in question.answers">
<input ng-model="Q[question.id]"
type="radio" name="Q{{question.id}}" value="{{answers.id}}"
required="" data-key="{{answers.isCorrect}}" />{{answers.answer}}
</li>
</ul>
</div>
<button type="submit" class="btn btn-primary" ng-click="EvaluatePosttest(3)"
ng-show="!TestPassed">
Submit Questions</button>
</form>
Here's a Plunkr that shows the dynamic code and demonstrates the form never turning valid when a radio button in each group is selected.
http://plnkr.co/edit/HQGPIOCdn3TGlE96CpK5?p=preview
And here's a Plunkr using static content displaying it working.
http://plnkr.co/edit/ZFt2VnBfaQjuu73kaNQJ?p=preview

Just add this in your javascript controller
$scope.Q = [undefined,undefined,undefined,undefined,undefined,undefined];
Explanation : you set ng-model as Q[question.id] but Q is undefined so the ng-model won't ever work. You always must initialize variable in the controller. The only case it works not initialize is when you do :
ng-model="test"
if you do
ng-model="test.test"
ng-model="test[0]"
It won't ever work if it's not initialized properly.

You can do a custom form validation inside your controller. In your case:
$scope.Q = [];
$scope.$watch('Q', function (Q) {
$scope.posttestForm.$setValidity('count', Q.length >= $scope.questions.length);
}, true);
Inside that, you can do whatever validation you want.
Here's the working plunkr: http://plnkr.co/edit/7Ww4fjJzkDjifPaZ2QtG?p=preview

Input checked has not working in side partial in angular

I m beginner in Angular. I m working on a angular project. I have a input checkbox in my partial source. When it checked a popup should appear, not checked state have a popup.
I found the below code on google and it works separately. But when i put it my partial source it doesn't work.
<div>
<div >
<input type="checkbox" ng-true-value="A" ng-false-value="B" ng-model="check"/>
</div>
<div ng-show="check == 'A'">
Checked
</div>
<div ng-show="check == 'B'">
Unchecked
</div>
Can you anyone help me

Assuming You want to access the parent controller value inside partial which has been loaded using ng-controller directive, In that you need to follow dot rule in your code, As a ng-controller create a new child scope whenever it adds the specified template.
For solving issue you should have your data in object structure in-order to follow prototypal inheritance
Code
$scope.model = {};
Markup
<div>
<div >
<input type="checkbox" ng-true-value="A" ng-false-value="B" ng-model="model.check"/>
</div>
<div ng-show="model.check == 'A'">
Checked
</div>
<div ng-show="model.check == 'B'">
Unchecked
</div>
Other way to do it would be is you can simply use $parent before the check scope variable, that will refer to the parent scope of the controller.
Just replace check with $parent.check everywhere in the view, This will work but the first approach is most preferable.

Add single quotes to 'A' and 'B'
<div >
<input type="checkbox" ng-true-value="'A'" ng-false-value="'B'" ng-model="check"/>
</div>

How to validate emails onEqual in several divs with them on the same page

The situation:
<body>
<div id="1">
<input type="text" name="email_1"/>
<input type="text" name="email_2"/>
</div>
<div id="2">
<input type="text" name="email_3"/>
<input type="text" name="email_4"/>
</div>
<!--and so on...-->
</body>
And I need to validate inputs inside these 2 inputs inside every div to be equal(only inside div). Maybe the main problem is that all divs are dynamically generated, and we don't know exactly their quantity to provide knockout support. How to do that? What is the most elegant solution?
Update 1
I've tried:
1. To make some binding using knockout model. But my solution for this
was to create some observable property to check inputs values. This
is bad way I guess.
2. To use jquery for this. Tried to validate fields via validate class for
inputs(http://jqueryvalidation.org/jQuery.validator.addClassRules/)
Update 2
My solution was something like that:
<div id="1">
<input type="text" name="email_1"/>
<input type="text" name="email_2"/>
<label data-bind="visible: checkEmailsEquality(email_1,email_2)">Emails must be equal</label>
</div>
But this solution is not ok, because this binding works only once - at page loading, what isn't good. I need to bind this check to text update in these inputs, and I don't know how.
Update 3
My suggestion is to deal with it in this way:
Make on the first email input this binding http://knockoutjs.com/documentation/textinput-binding.html
Bind with similar function in knockout's model as wrote Wayne Ellery.
If values aren't equal make error label visible.
The main condition is to pass apropriate inputs ids to function, and I guess this will work.

The simplest way to do this is to just use a computed which will compare the two emails.
Below in ViewModel I'm using the jQuery $.map method to map all items to an array of Item objects.
var ViewModel = function (model) {
var self = this;
self.items = $.map(model.items, function(item) { return new Item(item) });
};
Here I'm using a computed method in Item to compare email1 and email2.
var Item = function (item) {
var self = this;
self.email1 = ko.observable(item.email1);
self.email2 = ko.observable(item.email2);
self.areEmailsSame = ko.computed(function() {
return self.email1() === self.email2();
});
};
http://jsfiddle.net/pxar0587/1/

I've found maybe the most elegant solution, it's about using equalTo attribute, e.g.:
<div id="1">
<input type="text" id="1" name="email_1" equalTo="#2"/>
<input type="text" id="2" name="email_2" equalTo="#1"/>
</div>
Hope this help somebody.

Angular custom click to edit - input value to function

I have a basic click to edit span field in my code, which prompts an input box and a couple of buttons:
<span ng-click="editField()" ng-if="edit === false">Your text to edit</span>
<div ng-if="edit === true">
<input type="text" ng-bind="data.field" value="Your text to edit" />
<button type="submit" class="btn btn-primary" ng-click="update(data.field, 'somename')"><span class="glyphicon glyphicon-ok"></span></button>
<button type="button" class="btn btn-default" ng-click="cancelEdit()"><span class="glyphicon glyphicon-remove"></span></button>
</div>
When the user saves, the update function is called. However, the issue I'm having is that how do I send whatever text the user inputs, towards my angular logic, without settings the text values in an object at the start of the controller?
Heres an example:
http://jsfiddle.net/43GUa/1/
Basically it prints in the console: undefined + somename
How do I get that undefined to the text in the input field? I can't use ng-model since I'm unable to declare my object data(?) in my controller.
Cheers

ng-bind replaces the text of the element with the value, you want to use ng-model for two-way binding to the value of the control (fiddle):
<input type="text" ng-model="data.field"/>
Why don't you want to set the value at the start? If you want the value to come from the HTML you should write a directive. If you are doing this in more than one place you could write something to update a field or to call a function:
<my-editable update="data.field">Your text to edit</my-editable>
<!-- or -->
<my-editable update="updateValue($value, 'somename')">Your text to edit</my-editable>
If you really don't want to do that, you could pass $event to editField() and load data.field with the value then:
$scope.editField = function(event) {
$scope.edit = true;
$scope.data.field = event.target.innerText;
};
<span ng-click="editField($event)" ng-if="edit === false">Your text to edit</span>