I have the following html:
<li ng-repeat="friend in friends">
<span ng-repeat="(key, value) in friend.aktuell">
<input type="text" ng-model="friend.aktuell[key]">
</span>
<quick-datepicker ng-model="auditDate"></quick-datepicker>
<button ng-click="audit(auditDate, friend._id)" class="btn btn-info">Audit</button>
</li>
Now how can I update only the input fields of the friend[index] - so to speak - that has been clicked via the audit button?
e.g.
$scope.audit = function(auditDate, id){
$scope.friends[1].aktuell = {someData:someValues}; // this works if the index is hard coded
});
};
Above works if the index '1' is hard coded into 'friends[1]', but of course I want to no update this in the second input row, but in the one that has been clicked.
Idea: Can I pass the current clicked "indexifier" to my audit function or alternatively can I alter the input fields where "friend._id = friend._id"?
Screenshot:
There is $index variable available inside ng-repeat:
ng-click="audit(auditDate, $index)"
Why don't you pass the friend reference instead of passing its index?
<button ng-click="audit(auditDate, friend)" class="btn btn-info">Audit</button>
And on the controller:
$scope.audit = function(auditDate, friend){
friend.aktuell = {someData:someValues};
});
};
Related
This is my problem:
I'm using ng-repeat to create input fields from an array. [a, b, c,...]
I have a button that lets you add more blank input fields.
After clicking the save button I want to be able to create a new array from the input fields.
So I'm thinking of having an iterated ng-model (item-1, item-2, item-3,...) tracking each of these inputs, then iterate through them when I hit save. But that requires me to have each input binded with a new variable that's not from [a, b, c,....].
So what I'm asking is how I can do this pseudo code with AngularJS.
<input ng-repeat="letter in letters"
set-value="letter.value"
bind-to-model="someNewVariable">
See this example:
Html :
<div class="addcontend">
<div ng-repeat="item in inputs track by $index">
<input ng-model="inputs[$index]" ng-value="item" />
<button ng-click='getVal(item)'>get input value</button>
</div>
</div>
<button ng-click="addfield()">Add field</button>
<button ng-click="log()">log</button>
Controller :
app.controller('cntr',function($scope){
$scope.inputs = ['a', 'b'];
$scope.addfield = function(){
$scope.inputs.push('')
}
$scope.getVal = function(v){
alert(v);
}
$scope.log = function() {
console.log($scope.inputs)
}
})
I have a miller column constructed in Angular and Bootstrap.
http://codepen.io/smlombardi/pen/WGwGbY
In the second column, clicking the word (link) opens the third column, but I need to have the checkbox add that word to an array of search terms.
If the checkbox is UN-checked, I need to remove that word from the array of search terms. As you can see in the pen, I have the adding part working, but un-checking the box adds the word again.
I realize what I need to do is somehow check the state of the checkbox and if it's true add the word and if it's false check the array for the word (string) and pop it out of the array.
I can't figure out how to check only the checkbox that was clicked.
<div class="col-xs-3 inner-column">
<div class="panel panel-default">
<div class="list-group">
<div class="list-group-item" ng-class="{active: $index === pmt.millercolumn.level1Selected }" ng-repeat="level1 in pmt.millercolumn.level1 track by $index">
<input type="checkbox" ng-model="activeSearchTerm" ng-change="pmt.change($index)" id="ng-change-example1" />
<a href="" ng-click="pmt.getSublevel2($index)" >
{{level1.name}}
<i class="pull-right fa fa-angle-right fa-lg"></i>
</a>
</div>
</div>
</div>
the ng-change on the checkbox calls:
_this.change = function (index) {
var searchTerm = _this.millercolumn.level1[index].name;
_this.searchTerms.push(searchTerm);
};
It looks like you're thinking in a jquery mindset where you need to handle events when something changes. An easier way would be to make each checkbox correspond to an item in the array, so the ng-model would be something like level1.isSelected. Then, to construct your search terms array, use scope.$watch and pass true as the 3rd argument to deep watch your array of items. When a checkbox is checked, your watch will be called and you can reconstruct the search terms array by plucking the terms of the list items that are selected.
Add this code in place of your _change function it works for sure
_this.change = function (index) {
console.log('Clicked on', _this.millercolumn.level1[index].name);
var searchTerm = _this.millercolumn.level1[index].name;
var searchIndex = _this.searchTerms.indexOf(searchTerm);
if (searchIndex == -1) { // If new push
_this.searchTerms.push(searchTerm);
}
else { // Else remove item
_this.searchTerms.splice(searchIndex, 1);
}
console.log(_this.searchTerms);
};
Working codepen demo : http://codepen.io/krishcdbry/pen/EgKgBv
You're running the same code no matter if the checkbox is checked or not. Try something like this:
_this.change = function (index, checked) {
var searchTerm = _this.millercolumn.level1[index].name;
if(checked){
_this.searchTerms.push(searchTerm);
}
if(!checked){
_this.searchTerms.splice(searchTerm);
}
};
FWIW, this is what I did, which works:
<input type="checkbox" ng-model="level1.isSelected" ng-change="pmt.change($index, level1)" id="mycb" />
_this.change = function (index, item) {
if (item.isSelected) {
_this.searchTerms.push(item.name);
} else {
var termToRemove = item.name;
for (var i = _this.searchTerms.length - 1; i >= 0; i--) {
if (_this.searchTerms[i] === termToRemove) {
_this.searchTerms.splice(i, 1);
}
}
}
};
I'm listing an array of names in my view like this:
<div class="checkbox col-md-3" ng-repeat="staff in stafflist | orderBy: 'name'">
<div class="checkboxinner">
<button class="btn btn-staff form-control"
ng-show="!staff.chosen"
ng-click="pushStaff(staff)">
{{staff.name}}
</button> // visible when unselected, invisible when selected
<button class="btn btn-primary form-control"
ng-show="staff.chosen"
ng-click="unpushStaff(staff, $index)">
{{staff.name}}
</button> // visible when selected, invisible when unselected
</div>
</div>
The first button triggers this function, adding the object into the array and being replaced with another button (different color, same content) that is supposed to act as a toggle. This function works perfectly.
$scope.paxlist = [];
$scope.pushStaff = function (staff) {
staff.chosen = true;
$scope.paxlist.push(
{
name: staff.name
}
);
console.log($scope.paxlist);
};
Basically, when I click I add the object, when I click again, I remove it. Here's the remove function:
$scope.unpushStaff = function (staff, $index) {
staff.chosen = false;
var index=$scope.paxlist.indexOf(staff)
$scope.paxlist.splice(index,1);
console.log($scope.paxlist);
}
My problem is that the unpushStaff() will indeed remove an item, but not the item I clicked to remove, but another one.
What am I missing?
Maybe the ng-show is messing with the $index?
Your staff entry in stafflist and the entry in paxlist are not identical. Based on your template below:
<button class="btn btn-staff form-control"
ng-show="!staff.chosen"
ng-click="pushStaff(staff)">
{{staff.name}}
</button> // visible when unselected, invisible when selected
It is clear that each staff entry in stafflist is some sort of object that has at least one attribute name and another chosen.
When you push onto paxlist, you are creating a new object that looks like:
$scope.paxlist.push(
{
name: staff.name
}
);
This is fine. But when you then come to remove it, you are looking for it by:
var index=$scope.paxlist.indexOf(staff)
where staff is the object in stafflist! Of course, that object does not exist in paxlist - a separate object you derived above in paxlist.push() is - and so indexOf() is returning -1, leading splice() to remove the last item on paxlist.
Hello I have a small project in which I want to have perform search from multiple dynamically added text fields.
This is how I add the search fields:
<div class="form-group" ng-repeat="choice in choices">
<button ng-show="showAddChoice(choice)" ng-click="addNewChoice()">Add another choice</button>
<input type="text" ng-model="choice.name" name="" placeholder="Search criteria">
</div>
And later I have a table with ng-repeat and here is that part:
<tr ng-repeat="todo in todos | filter: {filter from all fields}">
.......
</tr>
What I want to do is to have the contents filtered with all dynamically added search fields.
You'll have to create your own filter to handle that. I've gone ahead and gotten you started.
$scope.myFilter = function(input){
for(var key in input){
for(var x = 0; x < $scope.choices.length; x++){
if(input[key] == $scope.choices[x].name){
return true;
}
}
}
return false;
}
Here is the jsFiddle of the output: http://jsfiddle.net/wsPrv/
Rather than using the filter, do the filtering in the controller yourself. Here is the updated fiddle with the solution. In the first textbox, replace choice1 with "some" and you will see the todo with text "Some stuff" being displayed.
See the relevant part below. For details, see the fiddle.
$scope.$watch('choices', function(newValue) {
$scope.DisplayedTodos = [];
// Filter items here and push to DisplayedTodos. Use DisplayedTodos to display todos
}, true);
I have the following HTML code:
<div ng-controller="DemoController">
<label class="list-group-item" ng-repeat="option in DesignOptions">
<input type="radio" name="optionsRadios" value="{{option[0]}}" />
{{option[1]}}</label>
<label class="list-group-item" ng-repeat="option in StyleOptions">
<input type="checkbox" value="{{option[1]}}">
{{option[2]}}
</label>
</div
And I have the following AngularJS code:
<script type="text/javascript">
var app = angular.module('myApp', []);
app.controller('DemoController', function ($scope) {
var json = '{"Table":[[4,"Full"],[5,"Half"]],"Table1":[[4,1,"Elbow Patch"],[5,2,"Roll Up"]]}';
var obj = $.parseJSON(json);
$scope.DesignOptions = obj.Table;
$scope.StyleOptions = obj.Table1;
});
</script>
This gives me the following result:
Now, I need to display Elbow Patch checkbox only when Full radio button is selected. And Roll Up when Half radio button is selected. This is because, if you see obj.Table array, it has id of '4' for Full and obj.Table1 has id of '4' for Elbow Patch and so on.
I tried Angularjs - showing element based on a presence of id in array but could not modify it to work in my case as my array is very different.
Add a new property to your controller which will store the selected design option:
$scope.designOption = 4; // default to Full
Add the binding to this property in the view:
<input ng-model="$parent.designOption" type="radio" value="{{option[0]}}" />
Add an ng-show directive to the checkbox label:
<label ng-repeat="option in StyleOptions" ng-show='option[0] == designOption'>
I've removed the class and name attributes from the element just to make the code clearer.
NB Need to reference the $parent scope on the radio input as the ng-repeat directive will create a scope for each repeated element and javascript prototypical inheritance rules means that using just 'designOption' will create a designOption property on the child scope and not use the one in your controller.