Develop Reference

ng-disable all input elements

Let's say I have 10 input elements on a page. I want to dynamically add ng-disabled to them based on the status of ng-model
For example:
<input type="text">
<input type="text">
I would not like to use a containing <fieldset></fieldset>.
Is this possible through something like a loop?
var allInputs = document.getElementsByTagName("input");
$scope.schoolClosed = true;
angular.forEach(allInputs, function(currentInput) {
currentInput.setAttribute("ng-disabled", "schoolClosed");
});
Which would yield results such as:
<input type="text" ng-disabled="schoolClosed">
<input type="text" ng-disabled="schoolClosed">
Can I add angular attribute elements through the dom like this?

Yes, you can. You can define a directive for the input element, which will get run for all inputs. Then you can have a service to store the disabled state, and "subscribe" to changes in your directive to set the disabled property directly without using ng-disabled.
I would imagine that you will need to make your service more complicated and maybe allow different named groups to toggle, rather than all or none. You could even specify the name of the group on a containing element or for each input.
You would also likely need to check in the directive whether it is a text input, so it doesn't get applied to every single radio button, checkbox, number input, etc in your application.
Full Plunkr example
var app = angular.module('plunker', []);
app.service('InputDisableService', function() {
this._isDisabled = false;
this._subscribers = [];
this.disabled = function(val) {
if (arguments.length < 1) {
return this._isDisabled;
}
var prev = !!this._isDisabled;
if (prev !== !!val) {
this._isDisabled = !!val;
for (var i = 0, len = this._subscribers.length; i < len; i++) {
this._subscribers[i].call(null, this._isDisabled, prev);
}
}
};
this.toggle = function() {
this.disabled(!this.disabled());
}
this.subscribe = function(callback) {
this._subscribers.push(callback);
// invoke immediately with current value, too
callback(this.disabled());
var self = this;
return {
unsubscribe: function() {
self.subscribers = self.subscribers.filter(function(sub) {
return sub !== callback;
});
}
};
};
});
app.directive('input', function(InputDisableService) {
return {
restrict: 'E',
link: function($scope, $element) {
var sub = InputDisableService.subscribe(function(disabled) {
$element.prop('disabled', disabled);
});
var off = $scope.$on('$destroy', function() {
sub.unsubscribe();
off();
});
}
}
});
app.controller('MainCtrl', function($scope, InputDisableService) {
$scope.inputs = [];
for (var i = 1; i <= 100; i++) {
$scope.inputs.push(i);
}
$scope.toggleDisabled = function() {
InputDisableService.toggle();
};
$scope.isDisabled = function() {
return InputDisableService.disabled();
};
});
<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.5.11/angular.min.js"></script>
<div ng-app="plunker" ng-controller="MainCtrl">
<p>Inputs disabled: {{isDisabled()}} Toggle</p>
<p ng-repeat="num in inputs">
<label>Input {{num}}
<input type="text">
</label>
</p>
</div>

angularjs clean input field after submission

trying to clear input filed after button is clicked and post saved with angular but it does not work. here is a simple code
<!--html-->
<input type="text" ng-model="addField"/>
<button type="button" ng-click="addPost(item)">add</button>
/*script*/
$scope.addField = '';
function addPost(item) {
/*code for adding*/
$scope.addField = "";
}

Use a object instead of string, Try this
<!--html-->
<input type="text" ng-model="form.addField"/>
<button type="button" ng-click="addPost(item)">add</button>
/*script*/
$scope.form = {};
$scope.addPost = function(item) {
/*code for adding*/
$scope.form = {};
}

Service Function Not Being Triggered

I have a controller which works fine toggling hide and show on a div element at this stage I am trying to clean up so I started using a service.
Controller Snippet with toggle method inside
app.controller('addFormCtrl', function($scope, $http, $timeout, Service){
$scope.myVar = true
$scope.toggle = function (){
$scope.myVar = !$scope.myVar
//once toggled i.e form taken away success or failure message displayed for x time
$scope.successOrFailureAlert = true;
$timeout(function () {$scope.successOrFailureAlert = false}, 2000)
}
})
Service
app.service('Service', function($timeout){
var user = ""
var location = ""
this.toggle = function(var1,var2){
console.log(var1)
console.log(var2)
var1 = !var1
var2 = true;
$timeout(function () {var2 = false}, 2000)
}
})
Controller with service added
app.controller('addFormCtrl', function($scope, $http, $timeout, Service){
$scope.myVar = true
$scope.toggle = Service.toggle($scope.myVar, $scope.successOrFailureAlert)
//function (){
// $scope.myVar = !$scope.myVar
// once toggled i.e form taken away success or failure message displayed for x time
// $scope.successOrFailureAlert = true;
// $timeout(function () {$scope.successOrFailureAlert = false}, 2000)
//}
})
When I use the service instead of defining the method there. nothing happens the toggle dosen't fire. I wish I had more to add in regards to contextual information
HTML
<div ng-controller="addFormCtrl">
<span ng-show="successOrFailureAlert"> {{status}} </span>
<button ng-click="toggle()"> Add Employee </button>
<form ng-hide="myVar" ng-submit="submitAddEmployeeForm()">
<input type="text" ng-model="name">
<input type="text" ng-model="country">
<input type="submit" value="Submit" />
</form>
</div>

Call it inside a function, because your ng-click expects a function.
$scope.toggle = function(){
Service.toggle($scope.myVar, $scope.successOrFailureAlert);
}

Angular ng-model values not registered on submit

I know the title is kind of ambiguous but here is the issue: I have 2 input fields in a form that look like this:
<form name="modifyApp" class="form-signin" ng-submit="modify(val)">
<input type="text" class="form-control" ng-model="val.name" id="appName">
<input type="number" class="form-control" ng-model="val.number" id="number" min="0" max="65535">
<button type="submit">Submit</button>
</form>
When I load the page I populate those two with some values from inside the controller:
angular.module('myApp').controller('modifyAppController', ['$scope', function($scope) {
function setFields(appName, appNumber){
document.getElementById("appName").value = appName
document.getElementById("number").value = appNumber
}
$scope.modify= function(val){
console.log(val)
}
}])
The problem is when I press the Submit button. The values won't get registered unless I change them. For example, if I press the Submit button nothing gets printed, but if I change the number or the name, it gets printed.

In your controller you can simply initialize the val object like this:
angular.module('myApp', [])
.controller('modifyAppController', ['$scope', function($scope) {
$scope.val = {
name: '',
number: 0
};
function setFields(appName, appNumber) {
$scope.val.name = appName;
$scope.val.number = appNumber;
}
$scope.modify = function(val) {
console.log(val);
};
}]);

You need to rewrite your controller:
angular.module('myApp').controller('modifyAppController', ['$scope', function($scope) {
$scope.val = {
name = 'My app name',
number = '1'
};
function setFields(appName, appNumber){
$scope.val.name = appName;
$scope.val.number = appNumber;
}
$scope.modify= function(){
console.log($scope.val);
}
}])
You don't need to directly modify the DOM values in Angular. All your $scope variables are available in your template.

why not just have the following as the first line in your form
<form name="modifyApp" class="form-signin" ng-submit="modify()">
and then your controller can look like this
$scope.val = {
name: '',
number:0//some default values
}
$scope.modify= function(){
console.log($scope.val)
}

delete dynamically added values to the ng-repeat(angularjs)

First of all, happy thanksgiving to everyone of you !!
I have this plunker-> http://plnkr.co/edit/N2bs5xqmtsj3MmZKEI25?p=info
User selects all the three values and only then the 'Add' button is enabled for addition.
Once clicked, the entries selected are shown below using ng-repeat. I also a delete button button to every row which gets added. How can i ensure that the delete functionality works in this case. ? i.e. if i click delete, only that particular row will be deleted.
Secondly, if u have noticed during the first add, a single delete button is shown above the first row. how can i remove that?
I also want to save the selected files in the controller so i can give those data to the backend. How can i know which options have been selected by user.
here is the plunker code-
HTML
<div ng-controller="Controller">
<form name="form" novalidate>
<input type='file' onchange="angular.element(this).scope().fileNameChanged(this)" ng-model="document" valid-file required>
<select name="singleSelect" ng-model="activeItem.content" ng-options="foo as foo for foo in contentarray" required>
<option ng-if="contentarray.length > 1" value="" selected>Choose</option>
</select>
<select name="singleSelect1" ng-model="activeItem.content1" ng-options="foo as foo for foo in content1array" required>
<option ng-if="content1array.length > 1" value="" selected>Choose</option>
</select>
<button ng-click="addItem()" ng-disabled="disableAdd || (form.$invalid && (!form.$valid && 'invalid' || 'valid'))">Add</button>
</form>
<div ng-repeat="item in items" ng-show="isvisible">
<a>{{item.name}}</a>
<a>{{item.content}}</a>
<a>{{item.content1}}</a>
<button ng-click="deleteItem()">Delete</button>
</div>
</div>
JS code
var app = angular.module('Select', []);
app.controller('Controller', function($scope, $timeout) {
/* for adding optional file based selection values selected by the user*/
$scope.isvisible = false; /* display 1st line when user clicks on add button*/
$scope.items = [{
}];
$scope.activeItem = {
name: '',
content: '',
content1: ''
}
$scope.fileNameChanged = function (el) {
$scope.activeItem.name = el.files[0].name
}
$scope.addItem = function () {
$scope.isvisible = true;
$scope.items.push($scope.activeItem);
if ($scope.items.length > 6) {
$scope.disableAdd = true
}
$scope.activeItem = {} /* reset active item*/
angular.element("input[type='file']").val(null); /* To clear the input type file selected for next selection*/
}
/* for showing select options and enabling add button only when both the options are selected*/
$scope.content = {};
$scope.content1 = {};
$scope.contentarray = ['2', '3'];
$scope.content1array = ['12', '121', '1233', '1211'];
$scope.trigger = function () {
$timeout(function () {
$('form.bad select').trigger('change');
})
}
});

I am referring to your deleteItem() and delete-button-problem:
You will have to implement your deleteItem() method in your controller. ng-repeat will automatically update your list, when you delete an item from the model ìtems, no need for angular.element. This works, because of two-way data-binding in Angular.
Add an id to your ìtems and use that to delete the item from the model e.g.:
$scope.addItem = function() {
//...
$scope.activeItem.id = $scope.items.length;
$scope.items.push($scope.activeItem);
//...
}
$scope.deleteItem = function(item) {
$scope.items.splice(item.id, 1);
}
In your ng-repeat you need to define your button like this:
<button ng-click="deleteItem(item)">Delete</button>
Your other problem is with the additional delete-button: That is displayed, because you initialize your model ìtems with an empty element. Initialize like this instead and the button will not be shown:
$scope.items = [];
Hope that helps