how to Checked value from $index base. suppose in textboxStart Index and TextboxEnd . when user enter Start index 5 and End Index 10 , checkbox automatically checked, from 5 To 10 Index. please help me
<tr ng-repeat="item in MyList">
<td>{{$index}}</td>
<td>
<label class="mdl-checkbox mdl-js-checkbox" for="checkbox33">
<input autocomplete="off" ng-model="item.checked"
type="checkbox" id="checkbox33"
class="mdl-checkbox__input" unchecked>
{{CheckItems()}}
</label>
<td>{{item.Name}}</td>
<td>{{item.PilgrimID}}</td>
<td>{{item.GroupName}}</td>
<td>{{item.PassportNo}}</td>
<td>{{item.Gender}}</td>
<td>{{item.SubAgentName}}</td>
Use the ng-change directive to specify an update function:
<div>Input Start
<input ng-model="inputStart" ng-change="updateSelections(inputStart,inputEnd)" />
</div>
<div>Input End
<input ng-model="inputEnd" ng-change="updateSelections(inputStart,inputEnd)" />
</div>
Then update the selections:
$scope.updateSelections = function(iStart, iEnd) {
$scope.MyList.forEach((x,index)=>item.checked = (iStart<=index && index<=iEnd));
};
just push the selected values in an array , selectedItemIndexes like ng-checked="selectedItemIndexes.includes($index)"
https://stackblitz.com/edit/angularjs-snavdn
you can do it by adding one property like ItemIndex in your ItemList model,
and by putting input box with display none you can get index value in ItemList and can do what you want from javascript side,
<td><input type="text" style="display:none;" ng-model="item.ItemIndex"
ng-value="$index"/>{{$index}}
</td>
Related
I am using the ng-repeat to create the input fields dynamically, everything seems to be working fine and the input fields are created but due to some reason when I enter some value into that created input field then due to two-way data binding the value is entered simultaneously in all the text fields that were created.
As per my knowledge, I am assigning the different ng-model to each of the created fields so I am not sure why the values are being copied. When I try to print the values which are assigned to the input field just above the field then I see the id is different wanted to know why all the fields are taking the same value and also how can I prevent it.
HTML Code:
<tr>
<td ng-repeat="extension in ExtensionList">
<!-- Here the value displayed are different -->
{{ formdata.extension.ExtensionVlaues }}
<input type="text" class="form-control" id="extension.ExtensionVlaues" ng-model="formdata.extension.ExtensionVlaues">
</td>
</tr>
Here is the screenshot from the front-end:
Here is the example of my ExtensionList: {"Field1":"","Field2":"","Field3":1,"ExtensionVlaues":2}
As per my knowledge, the given ng-model is different but still not working. Can anyone please help me with this? I tried few things like ng-model="formdata.extension[ExtensionVlaues]" but still no luck.
I tried to assign ng-model like this but it is not working:
ng-model="formdata.extension[ExtensionVlaues]"
Based on the below answer I tried 2 different things it but it's not working and getting the same issue. Please let me know how can I resolve this:
<td ng-repeat="(key, extension) in ExtensionList">
<input type="text" ng-model="formdata.extension.key">
</td>
<td ng-repeat="(key, extension) in ExtensionList">
<input type="text" ng-model="formdata.extension.ExtensionVlaues">
</td>
You are trying to use ExtensionList as an array. You need to use it as an object with ng-repeat:
<td ng-repeat="(key, extension) in ExtensionList">
<input type="text" ng-model="formdata[extension][key]">
</td>
<td ng-repeat="(key, extension) in ExtensionList">
<input type="text" ng-model="formdata[extension][ExtensionVlaues]">
</td>
Just incase anyone else also struck at this issue:
<span ng-repeat="(key, extension) in ExtensionList" class="form-inline">
<br/>
<span>
{{ extension.NameSpace + ":" + extension.LocalName }}
</span>
<input type="text" class="form-control" id="extension.ExtensionVlaues" ng-model="ExtensionList.extension[key].FreeText" ng-blur="ExtensionText(ExtensionList.extension[key].FreeText, extension.ExtensionVlaues)">
</span>
I have a condition where I need to display values depending on an if condition. Below is my template code.
Template:
<td>
<label>Review Title/Purpose*</label>
</td></br>
<div ng-if="title1 == true">
<td>
<input type="text" class="col-md-10" maxlength="256" ng-show="title1" ng-model="arform.revtitle"><required/>
</td></div>
<div ng-if="title1 != true">
<td><input type="text" class="col-md-10" maxlength="256" ng-show="!title1" ng-init="'{{reviewtit}}'" ng-model="arform.revtitle"><required/>
</td></div>
The value in ng-init="'{{reviewtit}}'" is the value I get from Views. Where as the value in ng-show="title1" is the value I get from controller.
I just wanted to know is it right to use ng-show in the different ways I mentioned?
Can any one help how to get input and selected values by dynamically added with angularjs?
Here is my code in Plunkr
When I select vegtables, another input shows with some values. when I click submit button I need a json like
{
"itemName":"Mango",
"itemType":"fruits"
},
{
"itemName":"Carrot",
"itemType":"vegtables",
"iteminfo":"you selected Carrot"
},
{
"itemName":"Apple",
"itemType":"fruits"
}
I forked your plunker
You can bind itemInfo to an item object using ng-model. Rather than placing the text in a value attribute I just initialized the model value using ng-init.
<tr ng-repeat="item in Items">
<td>
<input type="text" ng-model="item.itemName">
</td>
<td>
<select ng-model="item.itemType">
<option value="">--Select--</option>
<option vaue="fruits">Fruits</option>
<option value="vegtables">Vegtables</option>
</select>
</td>
<td>
<div ng-switch on="item.itemType">
<input type="text" ng-model="item.itemInfo" ng-switch-when="vegtables" ng-init="item.itemInfo='you selected '+ item.itemName">
</div>
</td>
</tr>
Also I had to change the Items array to match your requested naming:
$scope.Items = [{itemName: "Mango"}, {itemName: "Carrot"}, {itemName: "Apple"}];
You can parse the JSON object in a for loop to get the selected value and add the new key value pair.
angular.forEach($scope.vegetables, function(value, key){
if(value.itemName== 'Carrot')
value.iteminfo = 'you selected Carrot';
});
I guess you might be looking for something like this, if I am not wrong.
i use ng-repeat as i populate the names
this is my view
<div ng-controller="user_tagging_ctl" ng-init="user_type='<?php if(isset($user_type))echo $user_type; else echo'all'; ?>';">
<input type="text" class="form-control" ng-model="user_srch" maxlength="35" placeholder="Project Manager" required>
<span class="user_tagging_container">
<ul>
<li ng-repeat="x in data | filter:user_srch | orderBy:['status','x.user_lname']" data-id="{{x.user_id}}">
<input type="checkbox" name="pm-group">
{{x.user_fname + ' ' + x.user_lname}}
</li>
</ul>
</span>
</div>
everytime i search using my textbox the checkbox button resets to false.
example: i check the name i want then try to search another name then if i clear the textbox, all checkbox are now false/not checked.
how can i preserved the checked ones and make them at the orders first those are checked?
Bind to ng-model:
<input type="checkbox" name="pm-group" ng-model="x.selected">
See how to order
After a couple of tries on fixing my code, and searching for any solutions on the net, I finally gave up and would like to ask help on you guys.
I'm working on multiple sets of radio buttons and turn them to star ratings:
imgur link on my ratings section (cause I am not able to post images)
Each star is represented with 1 radio button, and each row has 5 radio buttons. In this image, im creating 3 sets of 5 radio buttons. Using the ng-repeat feature,
<tr ng-repeat="number in called_numbers">
<td>
<div ng-if="number.name != null">
<span class="star-rating" ng-init="temp_called_numbers[$index].rating.value ">
<input type="radio" name="rating" ng-model="temp_called_numbers[$index].rating.value" value="1"><i></i>
<input type="radio" name="rating" ng-model="temp_called_numbers[$index].rating.value" value="2"><i></i>
<input type="radio" name="rating" ng-model="temp_called_numbers[$index].rating.value" value="3"><i></i>
<input type="radio" name="rating" ng-model="temp_called_numbers[$index].rating.value" value="4"><i></i>
</span>
</div>
</td>
Now this specific page keeps on refreshing so when you click/highlight on a specific star, it refreshes and returns 5 blank stars again. What I did was that, I created an array to temporary store the value of each row.
$scope.temp_called_numbers = [];
$scope.rating_stars = {
value:0
};
and setting $scope.temp_called_numbers by:
rate_stars = function(){
for(i=0; i < $scope.called_numbers.length; i++){
$scope.temp_called_numbers.push( {rating: $scope.rating_stars});
}
}
The issue here now is that, when I select a star/radio button in one row, the other rows get the same value. For example, I select 1 star for row 1 which is temp_called_numbers[0].rating.value indexed 0, all the other rows get 1 star as well.
Any code change, reference or any help is much appreciated. Thanks!
$scope.temp_called_numbers = [];
$scope.rating_stars = {
value:0
};
rate_stars = function(){
rating = $scope.rating_stars;
for(i=0; i < $scope.called_numbers.length; i++){
angular.extend(temp_called_numbers, rating);
}
}
<tr ng-repeat="number in called_numbers">
<td>
<div ng-if="number.name != null">
<span class="star-rating" ng-init="temp_called_numbers[$index].rating.value ">
<input type="radio" name="rating" ng-model="number.checked"><i></i>
<input type="radio" name="rating" ng-model="number.checked"><i></i>
<input type="radio" name="rating" ng-model="number.checked"><i></i>
<input type="radio" name="rating" ng-model="number.checked"><i></i>
</span>
</div>
</td>
</tr>
// Access selected items
angular.forEach($scope.called_numbers, function(value, index) {
if (value.checked) {
$scope.called_numbers[index].checked = isSelectAll;
}
});
For those checking on this thread. I've figure out that the issue here is not on the saving-to-array part, however, the issue is on the HTML side of the code.
Also, this was a visual bug on the stars and the array is fine and it stores the data when clicked. The reason that I was not getting the right data when clicking the radio button from 1 set of radio button group is because I was using <span></span> for the wrapper on the radio button.
what happened was that, even though I was getting 2 or more sets of Radio Button through ng-repeat, the page only accepts 1 radio button input.
By changing the wrapper to <form></form>:
<form class="star-rating" ng-init="temp_called_numbers[$index].rating.value ">
<input type="radio" name="rating" ng-model="number.checked"><i></i>
<input type="radio" name="rating" ng-model="number.checked"><i></i>
<input type="radio" name="rating" ng-model="number.checked"><i></i>
<input type="radio" name="rating" ng-model="number.checked"><i></i>
</form>
I can now get 2 or more different inputs from each set of radio button group.