I have a modal with with a div that consists of:
1. One text input.
2. Two drop downs.
I also have buttons that Add and Remove the above mentioned div as need be, and I am achieving the same in the following way :
$scope.data = [{}];
1.Adding:
$scope.addRow = function(){
$scope.data.push({});
}
}
Removing:
$scope.removeRow = function(){
$scope.data.splice($scope.data.length-1,1);
}
This works well, it adds and removes the div appropriately.
This is my HTML:
<div class="row" ng-repeat="count in data">
<div class="col-lg-4 col-md-3 col-xs-6 col-sm-6">
<input type="text" ng-model="inputNumber" class="form-control" ng-required="true" autofocus="true"/>
</div>
<div class="col-lg-3 col-md-3 col-xs-6 col-sm-6">
<div class="controls">
<select class="form-control" ng-options="item.Data for item in items" ng-model="init"></select>
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-6 col-sm-6">
<div class="controls">
<select class="form-control" ng-options="item for item in allItems" ng-model="getNewData"></select>
</div>
</div>
</div>
It basically consists of the text input field and two dropdowns with certain options.
My question here is, as and when I 'add' or 'remove' this div with the values that I input - How can I get all of the inputted values in my controller function and store it in an array?
A console.log on angular.toJson($scope.data) gives me an empty output.
What am I missing, and how can I get the values of all the rows for each of my fields?
Your data seems to be coming from all over the map. So it's hard to tell what is going on here. Your outer ng-repeat is repeating over count in data, but you never refer to that again. Your text input isn't even bound to an ng-model at all, so I'm not sure what the point of requiring it is.
What I'd suggest is create an array of objects that have properties that drive your two selects and one input. So maybe like this:
//these names are coming from your code. I know they make no sense, but there's not enough in your code to figure out what the sensible names would be
$scope.data = [
{id:1, inputVal:'', init:'', getNewData:''},
{id:2, inputVal:'', init:'', getNewData:''}
]
In this case, you'll probably want to add a "track by" since these are empty objects. I assume your real objects have real values they can use, but I don't have the information to put anything in there.
Then you can set your ng-model on the text input to count.inputVal, the first select to count.init, and the second select to count.getNewData. Your delete button would point to the entire selected item from your $scope.data collection, so all its properties would be right there.
According to your comment above. This maybe your solution;
<div class="row" ng-repeat="count in data">
<div class="col-lg-4 col-md-3 col-xs-6 col-sm-6">
<input type="text" class="form-control" ng-required="true" autofocus="true" ng-model="textInput"/>
</div>
<div class="col-lg-3 col-md-3 col-xs-6 col-sm-6">
<div class="controls">
<select class="form-control" ng-options="item.Data for item in count.data" ng-model="init"></select>
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-6 col-sm-6">
<div class="controls">
<select class="form-control" ng-options="item for item in count" ng-model="getNewData"></select>
</div>
</div>
</div>
You can access "textInput" via "$scope.textInput" in your controller. Also you can see all the objects in your "item.Data" by repeating in "count.data" or which ever the field name in your object. But be sure that data field in count object is an Array. In your 3rd div, you access it with "$scope.getNewData" in your controller. But you must be repeating in count object and count object should be an Array.I hope it works.
Related
Hi , I am uploading documents along with some key word as you can see in the diagram.Here is the code for for inserting key words into the panel which is formed inside a div.
<div class="tagListForDocument col-xs-6 col-md-6">
<div class="panel panel-default">
<div class="panel-heading">{{'TAG.TagsForDocument' | translate}}</div>
<div class="panel-body btn-group-vertical" role="group" aria-label="available tags">
<button ng-repeat="tag in ul.tagsForDocuments" ng-click="ul.removeTag(tag)" class="btn btn-flat">
<span class="icon-remove"></span> {{tag.name}}
</button>
</div>
</div>
</div>
As you can see the keywords are formed ({{tag.name}}) based on iteration of ul.tagsForDocuments array.
Now my problem is that I want to remove all these keywords once the uploading is finished.That means before uploading second time the panel should be empty. But dont know the efficient way of doing this. How can I reload this particular part of html with empty ul.tagsForDocuments array.
In your controller you can do:
ul.tagsForDocuments = [];
which will make the array empty. Angular will then update the view accordingly.
New to Angular, so far loving it. I've come so far in creating a list of thumbnails. I've added 3 sort buttons order the thumbnails by 3 different data values. All works great but to make it a little more less confusing for the user I would like to reset/turn of ordering for one data set when another order button is clicked. EG - https://jsfiddle.net/5wayfc4z/
From the fiddle you will notice when you click on country its becomes orederd by "country" when you then click on "a-z" it will sort the data by attraction but the "country" sorting will be still showing - to turn this off I need to click on country again. I only want to sort one field one at a time if that makes sense?
<div id="buttons" class="row">
<div class="col-sm-6 col-md-4">
a-z
</div>
<div class="col-sm-6 col-md-4">
Country/State
</div>
<div class="col-sm-6 col-md-4">
type of attraction
</div>
</div>
<article>
<div class="row">
<div ng-repeat="selfieObj in sticks | filter:searchAttraction | orderBy:predicate:reverse">
<div class="col-xs-12" ng-show="newGrouping($parent.sticks, 'country', $index);">
<h2 ng-show="villa">{{selfieObj.country}}</h2>
</div>
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img ng-src="{{selfieObj.mainImage}}" alt="{{selfieObj.attraction}}" title="{{selfieObj.attraction}}">
<div class="caption">
<h3>{{selfieObj.attraction}}</h3>
<p class="text-center">
{{selfieObj.answer}} {{selfieObj.info}}
</p>
</div>
</div>
</div>
</div>
</div>
</article>
EDIT:
https://jsfiddle.net/5wayfc4z/ new fiddle to take away the styling so it does not confuse.
To see my issue click on "country/state" - you will see the filter work by sorting by country and adding the country name. Then click on "a-z" this works BUT you will notice the filter for "country/state" is still in effect - in order to remove the "country/state" you have to click that filter button again.
The sorting seems to work fine in your fiddle, so is this just a visual issue?
Just remove the initial states from the buttons:
class="btn btn-primary btn-block"
instead of adding active or inactive by default.
I have forked your fiddle with the fix: fiddle
My requirement is when I clicked on start button one of the Div content must be changed to "in Progress" and the value="start" must changed to value="Complete", now when I click on "complete button" the div content must changed to Completed and this complete button must be hidden.
I can achieved some of the requirement by Jquery, but I want to implement it by Angular JS. First of all I should know How can I read button value="start" in controller of angular Js. Below is my code.
<div class="row" style="margin:0% 20% 2% 10%;">
<div class="col-lg-2 col-sm-12 text-center">
18/5/2015
</div>
<div class="col-lg-2 col-sm-12 text-center">
eureQa
</div>
<div class="col-lg-2 col-sm-12 text-center">
Int-1
</div>
<div class="col-lg-2 col-sm-12 text-center" id="status">
Pending
</div>
<div class="col-lg-2 col-sm-12 text-center">
</div>
<div class="col-lg-1 col-sm-12 text-center" >
</div>
</div>
Use ng-click to set a scope variable or fire a controller function which sets a scope variable that is watched by ng-show. ng-show and ng-hide are responsible for showing/hiding dom elements.
$scope.buttonName = 'start';
onload Declare a value for button and in trigger change value for the
{{buttonName}}
$scope.buttonName = 'tempName';
You don't need to set the value at all. ng-model takes care of it,
Add $scope.value and replace value when you required
Basically, in my template I have the following code:
<div class="normal-padding">
Quicksearch: <input type="text" id="searchBox"/>
</div>
<div class="ui divider"></div>
{{#each getChildren}}
<div class="normal-padding">
<div class="ui two column grid">
<div class="column" style="width:60px;">
<div class="squaredOne">
<input type="checkbox" value="{{_id.toHexString}}" class="selectedChild" id="{{_id.toHexString}}" >
<label for="{{_id.toHexString}}"></label>
</div>
</div>
<div class="column">
<label for="{{_id.toHexString}}">{{firstname}} {{lastname}}</label>
</div>
</div>
</div>
{{/each}}
Where getChildren is the data coming from mongo.
My question is this:
How can I use what's being typed in input#searchBox to add/remove members from the getChildren helper?
Example:
Typing "ar", will list only the records that start with "ar".
I can figure out the regex required, I'm just not sure how to do this in meteor the correct way. I especially want to stay away from manually manipulating the DOM.
I've tried some filtering packages, but they all query the database again, where I just want the data that's already in the client/browser to be changed.
In other words, not send a query down the wire again.
Thanks!
My question is about generating dynamic html content with ng-repeat that contains multiple ng-model instances stored in an array.
But I get a syntax error for {{ in ng-model.
Is it possible somehow?
<div class="col-xs-12 col-md-12 col-sm-12 col-lg-12" ng-repeat="(key, antecedente) in antecedentes" >
<div class="form-group">
<label class="col-md-3">{{antecedente.name}}</label>
<div class="col-md-1"> Si <input ng-model="historia.antecedentes[{{key}}].seleccionado" type="radio" value="S"></div>
<div class="col-md-1"> No <input ng-model="historia.antecedentes[{{key}}].seleccionado" type="radio" value="N"></div>
<div class="col-md-2">Observaciones </div>
<div class="col-md-5"><input ng-model="historia.antecedentes[{{key}}].observacion" class="form-control" type="text" value=""></div>
</div>
</div>
you dont need curly braces around key, ng-model evaluates the expression/variable itself
ng-model="historia.antecedentes[key].seleccionado"
Everything you have a tag with ng in front of it, you don't have to have any curly braces, ever (except with ngSrc, wich whole purpose is to use curly braces inside a src). That's a good memory rule I think.