We Keep Coding

How to prefill a textbox with a value using ng-model

I have this as HTML:
<div class="row" ng-app="">
<form>
<input type="text" ng-model="link" name="link"
class="form-control" id="yesklinkshjhs3"
value="hello" placeholder='Link for your post.'>
</form>
<small></small>
</div>
I have created this HTML just to show the problem so there may be some mistakes but the main issue is that the textbox cant is prefilled with any value if I use the ng-model there.
If I remove the ng-model the value is there. I need the form to be prefilled to facility the editing of a post, how should I do that ??
I have tried removing the ng-model it works then but I need the ng-model there to show the realtime change in the next box.
I am new to the angular.
Here is a fiddle
http://jsfiddle.net/iamrahulkumar001/wksapfr2/
The textbox does not have any prefilled value ...

There's a few things with your JSFiddle that need to be fixed. First, you'll need to use the ng-app directive to bootstrap your application. Second, you should be registering MyCtrl as a controller. Third, you can set a default value for inputValue in your MyCtrl controller. Below is a working example demonstrating these three items.
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', MyCtrl);
function MyCtrl($scope) {
$scope.inputValue = 'sjks';
$scope.$watch('inputValue', function(thisValue) {
$scope.inputValueEcho = thisValue;
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<input data-ng-model="inputValue" data-ng-trim="false" value='sjks'/>
<p>This value: ----<span data-ng-bind="inputValue"></span>----</p>
<p>This value (echo): ----<span data-ng-bind="inputValueEcho">dddddd</span>----</p>
</div>

Update DOM only when $scope data changes

In my angular js app, I noticed that the DOM updates any time I call a function. This happens even when the function did not change any $scope variable.
I'm using an ng-repeat to create a set of checkboxes as shown below.
HTML
<a ng-click="someFunction()" >Some Function</a>
<form action="/settings/save">
<label>
<input ng-repeat="option in settings.active" name="options[]" value="{{option}}" checked="checked" />
{{option}}
</label>
<input type="submit" value="Save" />
</form>
JS
angular.module("myapp")
.controller("settingsCtrl", function($scope, $loadServ){
//$loadServ is a service for fetching data from the server
$loadServ("/settings/load")
.success(function(response){$scope.settings = response.data});
$scope.someVariable = "something";
$scope.someFunction = function(){
//There's nothing here yet
}
//More code follows
})
I noticed that all the unchecked checkboxes are checked when the "Some Function" button is clicked. I inspected the DOM and realised that all the checkboxes were re-rendered when the button was clicked.
Is there a way to update the DOM only when the $scope changes?
Note: I can't use one way binding because the $scope.settings.active can be changed by some other function

I've found the source of the error. It was caused by a filter that was applied far above the nodes

AngularJS : Show and hide class on ng-click

I am working on a website in AngularJS. I have a form which is set to "display:none" on purpose.
I have a button which says create. What i want is that when i click on the create button the form set to "display:none" should change to "display:block" and the create button should hide.
Also after submitting the form , the form should hide and the create button should be visible again.
P.S: Now i understand that there are a couple of ways to do this, like i could use the ng-show or ng-hide directive. OR i could use ng-click directive. I want to know what is the best programming practice in this case when developing a serious and professional web application.
Its a simple thing so if you could please provide the code that would be great.

Simply use the ngClick directive with the ngShow directive see below for a working example:
var myApp = angular.module('myApp', []);
myApp.controller('FormController', ['$scope',
function($scope) {
// init showForm to false;
$scope.showForm = false;
// init empty user object for our form
$scope.user = {};
$scope.submitForm = function() {
// logic when the form is submitted
//...
// reset the user
$scope.user = {};
// finally hide the form
$scope.showForm = false;
};
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="FormController">
<button ng-hide="showForm" ng-click="showForm = true">Show form</button>
<form ng-show="showForm" ng-submit="submitForm()">
<input type="text" name="firstname" ng-model="user.firstname" />
<input type="submit" value="submit" />
</form>
</div>
</div>
We are setting the form to show if showForm is true.
This variable is toggled using the ngClick directive on the button element and is also explicitly set to false in the controller within the submitForm function.
We use the ngSubmit directive to bind submitForm() to the onsubmit event. When the form is submitted, you run your logic and then the form is reset and hidden.

I'd use ng-click along with ng-show.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<div class="hideShow" ng-show="showToggle">
<form ng-submit="showToggle = false"></form>
fghfgh
</div>
<button ng-hide="showToggle" ng-click="showToggle = !showToggle">Click To Show</button>
</div>
That will start hidden, and show when you click the button.

Initially show Click To Show button and when click on this button then will show your content and show another button Click To hide button so also need to use ng-show for both buttons.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
<div class="hideShow" ng-show="isShow">
<p>here your form or other content
<p>
</div>
<button ng-click="isShow= !isShow" ng-show="!isShow">Click To Show</button>
<button ng-click="isShow= !isShow" ng-show="isShow">Click To hide</button>
</div>

AngularJS: Can I make div/span elements change form's ng-valid status?

I have a form. Inside that form, I have a dropdown that adds items to an array in the model. Inside the ng-repeat for that array, there is a list of requirements that the model needs before it can be considered valid, which is displayed in <span> elements. That list is checked with a function that is run by ng-class in order to display the requirement as green or red depending on whether the requirement has been met. I need the form to be considered invalid when any of these items are red. I have tried returning ng-invalid in the class of the <span> element along with the class that sets the color, but the form ignores this. What can I do to make this work?

You can access the validation variables directly on you controller. So you can do a function to verify any modifications and set the form validity as you want.
Some code example:
The form should be invalid if the input is empty, but this can be override by the checkbox value.
angular.module('app', [])
.controller('ctrl', ctrl);
function ctrl($scope) {
$scope.chkChange = function(value) {
$scope.form.$valid = value;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="ctrl">
<form name="form">
<input name="input" ng-model="userType" required>
<input type="checkbox" ng-model="chkbox" ng-change="chkChange(chkbox)">
</form>
<p>Form valid {{form.$valid}}</p>
</div>

ng-change not fired from checkbox inside label

I have some HTML like this:
<input ng-controller="cboxCtrl" type="checkbox"
ng-model="hideCompleted" ng-change="hideChanged()"/>
and a controller like this:
angular.module('simple-todos').controller('cboxCtrl', ['$scope',
function ($scope) {
console.log("starting");
$scope.hideChanged = function () {
console.log("in hideChanged() ");
};
}]); // end controller
It works fine and I see the message on the console when I click the checkbox. However, if I add a label around the checkbox:
<label>
<input ng-controller="cboxCtrl" type="checkbox"
ng-model="hideCompleted" ng-change="hideChanged()"/>
Some text to explain the checkbox
</label>
The ng-change function does not run when I click the checkbox. I expect it has something to do with scoping but I cannot figure out what. If I replace labels with divs (which of course does not give a "nice" laýout), the ng-change function is again executed as expected.

I just created a jsfiddle with your code and it works for me.
https://jsfiddle.net/jfplataroti/hphb8c4v/5/
angular.module('simple-todos', []).controller('cboxCtrl', ['$scope', cboxCtrl]);
function cboxCtrl($scope) {
console.log("starting");
$scope.hideChanged = function() {
console.log("in hideChanged() ");
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="simple-todos">
<label>
<input ng-controller="cboxCtrl" type="checkbox" ng-model="hideCompleted" ng-change="hideChanged()" />some text for the label
</label>
</div>
would you mind sharing your complete code?

clicking on label also triggers ng-change, you can click the label of a checkbox/radio to check/uncheck It should trigger the scoped function.

Please check for the browser you are trying to run this code. Also do check it on other browsers you have installed. AngularJS no longer supports IE8 or earlier.
link here: https://docs.angularjs.org/guide/ie

You need to move your ng-change on the checkbox to the surrounding label's ng-click
<label ng-click="hideChanged()">
<input ng-controller="cboxCtrl" type="checkbox" ng-model="hideCompleted" />
Some text to explain the checkbox
</label>