I am trying to use the selected radio as a reference to it's index within its array so that I may add more children in it's sub array (using the selected radio).
So here's what I have:
<div class="fakeTableRow" ng-repeat="parent in listTable">
<div class="strcutionLeft"></div>
<!-- parent levels -->
<div class="strcutionCRight saInstrcutionTitle"><div class="parentSub1"> <input type="radio" name="levelCheckDat" ng-model="levelChecker" value="{{$index}}">{{parent.name}}</div></div>
</div>
And then outside of this (above) there is a button that when pushed calls a function, inside that function I would like a reference to the index the radio is in so I may then drop children inside. Here is my attempt at that:
$scope.submitNewSub = function(){
//get index of radio
console.log($scope.levelChecker.indexOf($scope.levelChecker));
// .....continue function with index stored
});
My assumption was that the radios are stored in their own scope, however if i simply log ($scope.levelChecker) it comes back undefined, so i believe I am thinking about this wrong, I just cannot seem to figure out how.
To be clear, I am just trying to figure out the index (in the ng-repeat) of the selected radio with the model of levelChecker. Thanks for reading!
Edit: i swapped the value of the button to the {{$index}} to see if i could pull a value off by just calling the scope
Related
My HTML:
<div class="panel-body">
<span ng-repeat="industry in ctrl.industryList">
<label>
<input type="checkbox" id="industry" ng-model="ctrl.oneIndustry" ng-change="ctrl.updateSelected(industry)">
{{industry}}
</label><br/>
</span>
</div>
I am iterating through an array of industries and displaying a checkbox. When the checkbox is ticked, it is stored into an array. If the checkbox is then unticked, I would like to remove it from the array:
My Controller code:
vm.updateSelected = function (industry) {
if (vm.oneIndustry) {
vm.industries.push(industry)
}
else{
vm.industries.pop(industry)
}}
The current problem is when a checkbox is clicked, All of the items in the list get ticked although only the once which is clicked is saved. On untick, the item is removed from the list and all checkboxes become unticked. How do I tick and untick only the specific tickbox?
You can't use the same static ng-model for multiple check boxes, you need to either use a dynamic ng-model or one assigned to a value in the repeated array. This is so that each check box has its own separate model.
You can do this in multiple ways:
Add to your repeated array so that it has a value in each object in the array that says whether that object is selected or not. To do this you would assign it like ng-model="industry.isSelected".
Have a separate object that stores the bool for whether each array object is selected. To do this you would assign it like so ng-model="selection.industryIds[industry.id]"
In your case the best option is likely the first one, you would also need to change the if statement to the following though:
vm.updateSelected = function (industry) {
if (industry.isSelected) {
vm.industries.push(industry)
}
else{
vm.industries.pop(industry)
}}
ngModel helper
ngModel, input shoulde be string. Assignable AngularJS expression to data-bind to.
The name of AngularJS expression should be different.
<input type="checkbox" id="industry-one" ng-model="ctrl.oneIndustry"/>
<input type="checkbox" id="industry-two" ng-model="ctrl.twoIndustry"/>
My HTML:
<div class="check" ng-repeat="point in dbs">
<input
name="db"
id="{{point.id}}"
ng-model="point.select"
ng-click="update($index, dbs)"
ng-checked="false"
type="checkbox"
ng-required="point.select" />
</div>
Whilst my update() function looks like:
$scope.update = function(position, dbs) {
angular.forEach(dbs, function(point, index) {
if (position != index)
point.select = false;
});
}
This works as with regards to tracking what the selected checkbox is, and sending into another controller that expects the value, all is working good.
However, when I go back from the resulting page, back to this search form again, somehow the checkbox I selected before, is preselected, and I don't want anything to appear, rather just have everything blank.
Would it be as easy as simply stating:
$scope.point.select = null;
as I can't seem to find a good solution for this, so that the checkbox is always blank / not pre selected when you arrive on this form.
Let me see if I get what you are doing. It looks like you are trying to make your list of checkboxes mutually exclusive. I might look at using a radio button list (a set of radio buttons with the same name attribute, HTML interprets this as a mutually exclusive list). If you create a variable which will hold the value of the selected option and pass that value around, you probably can achieve the same result with less code. Take a look here: https://jsbin.com/sunusihuse/edit?html,js,output
As for clearing the list of controls when you revisit the page, what I have described will do that too because the value of the variable which will hold the selected value is initialized to an empty string. Hope this helps.
In this AngularJS controller for a pre-filled form, fetching the data is triggered by an event using $broadcast and $on. However, when the data updates, only some of the corresponding fields get updated in the view.
$scope.currentHouse = {};
$scope.$on('houseInfoLoad', function(event, data) {
$scope.currentHouse = data.houseDetail; //does not refresh the view
console.log($scope.currentHouse); //output is correct
//the next three calls refresh the corresponding fields in the view
$scope.changeGarageRadioValue($scope.currentHouse.hasGarage);
utils.setSelection($scope.houseKeywords, $scope.currentHouse.keyword.id);
utils.setSelection($scope.houseTypes, $scope.currentHouse.type.id);
});
changeGarageRadioValue() essentially does what it says, and utils.setSelection(list, id) adds a selected = true property to the element of the list that has the id. This has the effect of setting the value of a select field (using isteven's multi-select plugin).
The view has a few text fields bound to properties of $scope.currentHouse, as well as these radio buttons and select fields.
The result is that the text fields sometimes do not get updated, however the select and radio buttons do.
Here's what I tried unsuccessfully:
Wrapping everything in a $timeout();
Calling $scope.$apply() after setting $scope.currentHouse (throws an error saying that we are already inside an $apply())
Changing the initial definition of $scope.currentHouse from {} to an object with each of the fields set to null.
Can anyone see what I am missing, or how to force trigger the refresh?
EDIT : with extracts from the view :
A text field:
<label>ADDITIONAL DESCRIPTION</label>
<div>
<input type="text" ng-model="currentHouse.additionalDescription" class="input-mandatory" value=""/>
</div>
A multi-select:
<label>TYPE</label>
<div>
<div directive-id="houseType" multi-select input-model="houseTypes" output-model="currentHouse.type" button-label="text" item-label="text" selection-mode="single" default-label="Select" tick-property="selected" ></div>
</div>
The radio buttons :
<div><label>HAS GARAGE</label></div>
<div>
<div id="radiobuttonNo" ng-click="changeGarageRadioValue(false);">
NO
</div>
<div id="radiobuttonYes" ng-click="changeGarageRadioValue(true);" class="active">
YES
</div>
</div>
EDIT #2 as per Alok Singh's suggestion:
I tried putting data.houseDetail into $scope.currentHouse.house instead of $scope.currentHouse directly, and changing the view accordingly. Still no results.
$scope.currentHouse = data.houseDetail
You cannot get the updated value of currentHouse because its a model.
So change the above code i.e
$scope.currentHouse.house = data.houseDetail
I am using radio buttons in a ng-repeat and it seems to have some problem. Basically, they work, however the user has to click on the radio button twice to uncheck itself and I can't seem to figure out why. Here's how I'm using it.
<div ng-repeat="parent in chains track by $index"><!-- Level 1 row -->
<input type="radio" name="levelCheckDat" ng-model="trackChain.value" ng-value="{{$index}}" ng-change="trackLevelIndex()">
<p style="font-weight:bold;">Chain {{$index+1}}</p>
</div>
It comes through the repeat, but it only will start working after you click on it twice. Any insight into this?
The ng- change just sets a boolean so I know something is select like so :
$scope.trackLevelIndex = function(){
//update index for tracking what level we have selected
$scope.levelChecked = true;
};
Then I use the trackChain.value to tell me what level is selected.
I have a page with a list of items on it. Each row has a button. By pressing a button list item is added to another list on the same page (it's a typical "order" form). I'm using angular ng-repeater to show the first list. After user press a button an item info is added to JSON varaible. The question is what's the best way to show user's choice list on the same page? So far I'm think of adding an attribute to the first list so when user choose it, it'll be shown in the second list. But I also want first list to be modified by user without any changes to the second one. Any ideas?
Check the code below, the button ng-click directive is calling the function AddtoList2($index) to add the current List1 item to List2, optionally it removes the current item from List1.
At template side
<div ng-repeat="item1 in List1">
...
<input type="button" ng-click="AddtoList2($index)" />
</div>
<div ng-repeat="item2 in List2">
...
</div>
At controller side
$scope.List1 = [];
$scope.List2 = [];
$scope.AddtoList2 = function (idx) {
var item = $scope.List1[idx];
$scope.List2.push(item);
//If you want to remove from List 1
$scope.List1.splice(idx, 1)
};