Develop Reference

How to pass index value to controller from ng-repeat in Angular

I am dynamically creating divs, while clicking a button which contains some radio inputs. In the controller I have an array for the divs population which initially has a length of 1.
'use strict';
angular.module('load').controller(
'commodityController',
function($scope, $http, $state, $stateParams) {
$scope.parentload = $scope.$parent.load;
$scope.addMoreCommodities = function() {
$scope.parentload.loadCommodities.push({
'isHazmat' : false,
'dimension' : 'IN'
});
}
$scope.parentload.loadCommodities = []; // emtry array
$scope.addMoreCommodities(); // Here initialize the array
$scope.changeHazmat = function(booleans, val) {
console.log("booleans " + booleans);
console.log("isactive " + val);
$scope.parentload.loadCommodities[val].isHazmat = booleans;
};
});
Using following html, while loading the page div populated well,
<div class="form-right-card disabledInput" ng-init="showname==true" id="commodityContent">
<form name="commodityAttForm">
<div ng-repeat="loadCommodities in load.loadCommodities">
<div class="form-group33"> {{$index}} // here value prints correctly
<label class="form-label">Hazmat</label>
<input type="radio" class="form-btn-inactive" ng-click="changeHazmat('true',$index)" id="yes" name="hazmat" />
<label class="plsLabel" for="yes">Yes</label>
<input type="radio" class="form-btn-inactive" ng-click="changeHazmat('false',$index)" id="no" name="hazmat" />
<label class="plsLabel" for="no">No</label>
</div>
</div>
</form>
</div>
<button class="form-btn-link" ng-click="addMoreCommodities()">+ Add Commodity</button>
I am able to generate the div with all the inputs when clicking on the button. Problem is, I am sending the $index to controller on ng-click of the radio buttons, while clicking on the radio buttons, I am calling the function changeHazmat('true',$index) here the index is always 0, even when I have an array with a length greater than 1.
$scope.changeHazmat = function(selected, val) {
console.log("val" + val);
$scope.parentload.loadCommodities[val].isHazmat = selected;
Log is always printing the index as 0.
Can someone help me here, what am I doing wrong?

You are correctly passing the $index the controller and the code should work.
However I would recommend to use ngModel with ngValue directive.
<input type="radio" ng-model="loadCommodities.isHazmat" ng-value=true name="hazmat" />
(function(angular) {
'use strict';
angular.module('myApp', [])
.controller('Controller', ['$scope', function($scope, ) {
$scope.parentload = {
loadCommodities: []
};
$scope.addMoreCommodities = function() {
$scope.parentload.loadCommodities.push({
'isHazmat': false,
'dimension': 'IN'
});
}
$scope.addMoreCommodities();
$scope.changeHazmat = function(booleans, val) {
$scope.parentload.loadCommodities[val].isHazmat = booleans;
};
}]);
})(window.angular);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="Controller">
<div ng-repeat="loadCommodities in parentload.loadCommodities">
<div class="form-group33">
<label class="form-label">Hazmat</label>
<input type="radio" ng-model="loadCommodities.isHazmat" ng-value=true name="hazmat" />
<label class="plsLabel" for="yes">Yes</label>
<input type="radio" ng-model="loadCommodities.isHazmat" ng-value=false name="hazmat" />
<label class="plsLabel" for="no">No</label>
</div>
<p>{{parentload.loadCommodities}}</p>
</div>
</div>
</div>

I'm wondering if the problem is you're assigning the same "id" ('yes' and 'no') to multiple divs (ie inside the loop). It might be the reason the $index isn't working for you. If you remove the id's for the time being and re-try, I'm thinking the problem goes away.

AngularJS - How to set the value of the checkbox as true by checking another checkbox?

I have two checkboxes. If you click checkbox B, checkbox A must be checked too. But in my code, when I click checkbox B, the checkbox A is also checked. But the ng-model of checkbox A is not changing it's value from false to true. Can someone help me with this? Thank you in advance! Here's my code below: (Try running the code snippet)
<div ng-app="myApp" ng-controller="myCtrl">
Box a
<input type="checkbox" ng-checked="box2" ng-model="box1">{{box1}}<br />
Box b
<input type="checkbox" ng-model="box2"> {{box2}}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.box1 = false;
$scope.box2 = false;
});
</script>

One solution can be attach a change event handler to the second checkbox and change the box1's scope inside this method.
<div ng-app="myApp" ng-controller="myCtrl">
Box a
<input type="checkbox" ng-checked="box2" ng-model="box1">{{box1}}<br />
Box b
<input type="checkbox" ng-change="change()" ng-model="box2"> {{box2}}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.box1 = false;
$scope.box2 = false;
$scope.change=function(){
$scope.box1=$scope.box2;
}
});
</script>
One single advice:
ng-model and ng-checked are not meant to be used together.
ng-checked is expecting an expression, so by saying ng-checked="true", you're basically saying that the checkbox will always be checked.
You should be able to just use ng-model, binded to a boolean property on your model.

You can add ng-change directive on box2, which will invoke the function, where you can change the value of box1 programmatically, like this:
<div ng-app="myApp" ng-controller="myCtrl">
Box a
<input type="checkbox" ng-checked="box2" ng-model="box1">{{box1}}<br />
Box b
<input type="checkbox" ng-model="box2" ng-change="checkBox1()"> {{box2}}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.box1 = false;
$scope.box2 = false;
$scope.checkBox1 = function() {
$scope.box1 = $scope.box2;
}
});
</script>

Pass same variable into ng-model of both input boxes
<div ng-app="myApp" ng-controller="myCtrl">
Box a
<input type="checkbox" ng-checked="box2" ng-model="box1">{{box1}}<br />
Box b
<input type="checkbox" ng-model="box2" ng-change="onChange()"> {{box2}}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.box1 = false;
$scope.box2 = false;
$scope.onChange= function(){
$scope.box1= $scope.box2;
};
});
</script>

basically, ng-checked does not change the value of $scope.box1.
what you can do is display {{box2 || box1}} instead of {{box1}}

#Commercial Suicide has a good answer. I also found another method which uses less logic. Check the codes below:
<div ng-app="myApp" ng-controller="myCtrl">
Box a
<input type="checkbox" ng-checked="box2" ng-model="box1">{{box1}}<br />
Box b
<input type="checkbox" ng-click="click()" ng-model="box2"> {{box2}}
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.box1 = false;
$scope.box2 = false;
$scope.click = function () {
$scope.box1 = $scope.box2;
};
});
</script>

Change the type input dynamically

Hello I have a strange question. I have to create a form but the fields are different for every user so they could be a or . I tried with angular to do something like that
<div ng-controller="myCtrl" ng-repeat="x in prova">
<input type = "{{x}}">
</div>
And a controller like this
app.controller('controller',['$scope', function($scope){
$scope.prova = [
'text',
'check-box'
]
});
But as I thought it doesn't work.
Thank you for your help.

You can use the ng-switch directive to only render the correct input type when its type matches x.
<div ng-controller="myCtrl" ng-repeat="x in prova" ng-switch="x">
<input type="text" ng-switch-when="text">
<input type="checkbox" ng-switch-when="check-box">
<textarea ng-switch-when="textarea"></textarea>
</div>
More info:
https://docs.angularjs.org/api/ng/directive/ngSwitch

You missed the closing square bracket of dependency injection. This would work.
app.controller('controller',['$scope', function($scope){
$scope.prova=[
'text',
'check-box'
]
}]);

plunkr included
It works for me. Here is a very simple example in plunkr that mimic's your code.
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.arrTypes = ['submit', 'text', 'button', 'password', 'month'];
});
and in the index.html...:
<div ng-repeat = "inpType in arrTypes">
<input type={{inpType}} name="" id="" value={{inpType}} />
</div>

Some code Changes :
replace check-box with checkbox.
replace controller with myCtrl in the controller function.
Working demo :
Controller :
var myApp = angular.module('myApp',[]);
myApp.controller('myCtrl', function($scope) {
$scope.prova = [
"text",
"checkbox"
]
});
View :
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="x in prova">
<input type = "{{x}}">
</div>
</div>

How do I fire the enter keypress event of <input type="text"> programmatically in angular.js?

I have this <input type="text"> element whose enter keypress event I want to fire via the ng-click of another button.
i.e.,
Lets say :
<button ng-click="clickEvent()"></button>
<input type="text" id="textbox"></input>
Plnkr is here : http://plnkr.co/edit/tEVoHAAcyqQzWpc9iYpo?p=preview
Please help!

You can achieve this by creating angular directive. JSFiddle for reference - Demo
See the console after click on Click Me ! button. Hope this will help!
<body ng-app="myApp" ng-controller="myController">
<h1>Hello JSFiddle!</h1>
<button id="btnClick" ng-click="clicked()" capture-keypress>Click Me !</button>
<input ng-keydown="keypress($event)" id="txtInput">
</body>
app.controller('myController', function($scope) {
$scope.keypress = function($event) {
console.log('Key Event Fired');
};
});
app.directive('captureKeypress', function($timeout) {
return {
scope: true,
link: function(scope, element, attrs) {
scope.clicked = function() {
$timeout(function() {
element.siblings('#txtInput').trigger('keydown');
})
}
}
}
});

Using ng-disabled on a group of inputs based on one value

I'm currently using one check box to toggle the disabled attribute on 8 form elements. I've used the ngDisabled Directive on each element. I'm searching for a way that I wouldn't have to put the directive on each of the 8 elements. Is this possible?
Checkbox Toggle
<input type="checkbox" ng-model="aircraftOnGround" />
Current working Disabled directive being used on each form element
ng-disabled="aircraftOnGround"
Codepen here:
CodePen

You can use a fieldset to disable every field inside it.
var $scope = {};
var myApp = angular.module('myApp', []);
myApp.controller('formCtrl', ['$scope', function($scope){
$scope.aircraftOnGround = 'true';
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<form ng-controller="formCtrl">
<fieldset ng-disabled='aircraftOnGround'> <!-- USE NG_DISABLE HERE -->
<input type="text">
<input type="text">
</fieldset>
<br>
<b>aircraftOnGround:</b> <button type="button" ng-click="aircraftOnGround = !aircraftOnGround"><span ng-bind="aircraftOnGround"></span></button>
</form>
</body>

You can disable a collection of DOM elements using a watcher in your controller.
myapp.controller('mainCtrl', function($scope, $element){
$scope.aircraftOnGround = false;
$scope.name = "abdullah";
$scope.$watch('aircraftOnGround',function(value) {
$element.find('.form-control').prop('disabled',value);
});
});
Note: I'm using jQuery in the example.