angularjs Prepopulate input text inside ng-repeat directive - javascript

We have input text to be shown with pre filled values. We are using list using ng-repeat directive
<ul ng-repeat="post in postList>
<input type="text" ng-model="postid" nginit="postid='{{post.id}}'"></input>
</ul>
This question AngularJS - Value attribute on an input text box is ignored when there is a ng-model used? tells to how to prepopulate input text.
But somehow we are finding it difficult using inside dynamic list.
Can we do like this or there is any better approach?
When we this code we dont get any value in the text box but on checking in elements tab of developer console of chrome; we can see value is getting updated but not in the text box.

Why don't you just bind directly to post.id? If it has a value, it will bind it to the value property of the text box.
Also, make sure you are using correct markup (input tag) and using the correct directives (ng-init). And I'm pretty sure to do not want to repeat the ul tag, but the items inside of it.
<ul>
<li ng-repeat="post in postList">
<input type="text" ng-model="post.id"></input>
</li>
</ul>

Related

Clearing the text of an input tag with JavaScript

I am currently having trouble clearing the text inside of an input type="text" tag in my application. I have been able to clear the inputs of all fields by setting the necessary observable (knockout.js) to the default value, but with this input I can not find a way to do so.
The input tag I need to clear in the .cshtml file:
<input type="text" placeholder="Search for Users…" id="users" class="form-control" data-bind="autoComplete: Users, value: SelectedFilteredUser, optionsText: 'DisplayName', optionsValue: 'Value',autoCompleteOptions: {autoFocus: false}" />
I have tried my usual knockout.js approach of setting the observable's value to a default value:
self.SelectedFilteredUser(null); and self.SelectedFilteredUser("");
NOTE: self.SelectedFilteredUser(null); does set the value inside of the input to null as seen when I click it's associated add button I created, but the text is still inside the input tag. This is what I have used to clear my other inputs but it has not worked here surprisingly.
After looking over numerous StackOverflow posts such as this one, I have tried other solutions such as,
With jQuery: $('#users').val(''); and normal JavaScript access to the element: document.getElementById('users').value='';
These both have no effect at all.
If anyone has any idea how I can clear this input type="text" tag in my .cshtml file, it would be very appreciated.

ng-html-bind for label that contains checkbox

I have the following view.It's standard bootstrap for checkboxes,where input is located inside the label
<div class="checkbox">
<label ng-bind-html="vm.trustedHtml">
<input type="checkbox" ng-model="vm.isAcknowledged">
</label>
</div>
I need to bind my trustedHtml property,that contains html,on label.But this directive fully replace the content of the label,including the input.How can I avoid it?The only option I see is changing the html and moving the input out of label,but I don't like it.
No, ng-bind-html does not have anything like "place to insert". It's really straightforward.
add nested <span> and put ng-bind-html on it
include <input> into vm.trustedHtml
Don't use ng-bind-html if you know all variations possible and there are not so many of them: just describe all options with appropriate ng-if

$valid inside ng-repeat in AngularJS

I know how to show errors in angular js in case the all form input are invalid. I also know how to show message if one field is invalid.
The Question is how to show a message inside ng-repeat of items, when only some of the items are invalid.
<form name=form>
<div ng-repeat="item in items">
<textarea ng-model="item.value" name="item">
<div ng-show="form.name.$invalid">
I want to show this message if this textarea is invalid
</div>
</div>
<div ng-show="form.$invalid">You have error in your form</div>
</form>
Please see this above line <div ng-show="form.name.$invalid"> it will show the message x times, but I want to show the invalid message only for the invalid input.
Wrap everything under the ng-repeat with a <div> that has ng-form.
ngForm
Nestable alias of form directive. HTML does not allow nesting of form elements. It is useful to nest forms, for example if the validity of a sub-group of controls needs to be determined.
https://docs.angularjs.org/api/ng/directive/ngForm

Is there a label in HTML

i'm coming from Java background, Is there a label in HTML, where I could using for example javascript update the value.
I mean by label here, something similar like text input, but not not possible to update it, and it looks non-updateable.
You said you wanted something similar to a text input, so... use one, then! Just disable it, like
<input type='text' disabled>
^It's MAGIC!
You don't want label literally in HTML, because it's in no way similar to a text input. Labels in HTML are used for things like putting text in front of radio buttons.
If you wanted something similar to a Java label, you would just use the p tag, unless it would be behind a text input or so, then you would use the label tag.
The obvious to create a label would be using <label>
<label for="coward">Förnamn</label> <!-- points to to input element with id coward -->
<input class="text-input" name="coward" type="text" id="coward" value="whatever" />
But I think you're looking for something to "store a value in a form" that shouldn't be editable. You could use a hidden text input for that.
<input type="hidden" name="hiddenField" value="whatever" />
You could use divs (and style it the way you want it), and then just fetch the html from that div.
Take a look at the other answers as well.
There's a lot of options. What do you actually want to do? It would be easier to give you an answer that suits your needs.
A label is a <label>...
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label
You have a couple of options.
There is actually a <label> element, which is typically used for labeling the items in a form.
You could also do a text input (<input>) and set it to disabled:
<input disabled>
Or you could just use a simple paragraph element <p> and style it how you want.
Here is a JSFiddle with some examples: http://jsfiddle.net/QXP75/
However, you'd want to use something semantic, so knowing what the purpose is would allow a more specific message. Also, with CSS, you can make just about any element look like anything.

Angular.js: two-way binding inside ng-repeat

I'm working on an Angular application.
I want to generate a form with an arbitrary number of text input fields with two-way bindings for every individual input field. No buttons, no watchers. ng-model is not working correctly because of the scoping (if I'm not mistaken). The input fields are generated from an array with ng-repeat like this:
<div ng-repeat="item in items">
<label>{{item.name}}</label>
<input type="text" placeholder="{{item.default}}" ng-model="{{item.value}}"> <!-- this input should be bound -->
</div>
I just want a simple binding to update the items array in the controller on changes in the input.
Any help appreciated.
Just change input tag so it reads:
<input type="text" placeholder="{{item.default}}" ng-model="item.value">
Notice ng-model without curly braces.
Working plunk: http://plnkr.co/edit/CLdem9yIw2Sk1U52Iajl?p=preview

Categories

Resources