I am new to Angular JS and working on creating a table where dynamic rows can be added. The new row contains a checkbox which should default to selected (value=Y). For existing data it should show what comes up from DB (Y or N)
<input type="checkbox" ng-model="safetyCheck.needed"
value="{{safetyCheck.needed}}" />
I tried adding ng-checked="safetyCheck==Y" and set $safetyCheck:Y when pushing a new blank row. But this always results in Y even if users unselects the component. how can i fix this.
For specific check\uncheck values use ng-true-value & ng-false-value arguments:
<input type="checkbox"
ng-model="safetyCheck.needed"
ng-true-value="'Y'"
ng-false-value="'N'"/>
ng-checked should not be used together with ng-model. Instead just initialize the variable to true preferably in the controller or wherever you are adding the rows. (Or even in an ng-init as follows)
<input type="checkbox"
ng-model="safetyCheck.needed"
ng-init="safetyCheck.needed=true"/>
Related
I have created dynamic form, here I want to send form data to controller. How can do this?
Here is plunker code link https://plnkr.co/edit/xmxDJHTPfJoSFwa2FWCB?p=preview
Issues:
when I change the value then element label also change.
How can I get the form data in product_submit function of controller.
All response appreciated.
Use
<input type="text"
id="module_module"
ng-model="getCol.value"
required="required"
class="form-control col-md-7 col-xs-12"
placeholder="Enter {{getCol.Field}}"
/>
Look here ng-model="getCol.value". You are using filed name as text field model value. Filed name and value are different. That is what you want I suppose.
You can access the values easily from your controller as $scope.getColumn[1].value. Change index or iterate accordingly.
Plunker here
To solve label issues, in your html, I changed ng-model expression to bound into getColumn.Value
In controller, I can read value entered in scope.getColumn[i].Value
I also updated code https://plnkr.co/edit/KlhAb69seMzHsLuhqweR?p=preview
I am having trouble figuring out a good way to bind the data in this dynamically created table. I'm having trouble, both referencing the data for the original value of the input field, and I am having trouble updating the model after a change is made to the input field.
I've tried these:
<input type="text" value="{{set.date}}" ng-change="change(this.value)" />
<input type="text" ng-model="{{set.time}}" ng-change="change(this.value)" />
<input type="text" ng-value="{{set.exercise}}" ng-change="change(this.value)" />
PLUNKER
Do I need to create a unique key and pair it to each object in the model array so that I can pass it though to the change() method?
I'd like to avoid creating another level of keys in my model if possible.
You should use ng-modle like this ng-model="set.time" You don't need the curly braces to interpolate the expression because ng-model itself is a directive, it evaluates the expression for you.
Here is an example
I have a form with about 100 questions, each with a radio and some checkboxes, so I need the user to be able to save the form and load it later. I need also to check which ones the user changed in this session.
This question solves the problem: How can I denote which input fields have changed in AngularJS
The second answer (storing the old and current values of the model and comparing both) does it. However, if I wanted to go with the $pristine solution I have a problem. Unchecking a ng-checked box does not change it's $pristine value. The $pristine value becomes false only by checking the box again after the uncheck.
I know I'm not suposed to use ng-model with ng-check but I get the answers from the server in values of either 1 or 0. This values used as model do not check the checkboxes.
ng-model="question.answer" //will not check the box
ng-check="question.answer" //does check the box
Value comes as 1 from the server. Unchecking and checking the box changes it to 'true'
<input ng-model="question.answer" ng-checked="question.answer"
type="checkbox" name="{{'answer' + question.id}}"/>
Heres a plnkr: http://plnkr.co/edit/3xcI0Yq9WPZ1IxJJjKGt?p=preview
What you need is to set 1 and 0 to be considered as true and false values respectively. You can use ng-true-value and ng-false-value to have that set up. You dont have to deal with converting 1/0 to true/false and also can get rid of ng-checked and use ng-model itself effectively.
<input ng-model="question.answer"
ng-true-value="1"
ng-false-value="0" type="checkbox" name="{{'answer' + question.id}}" />
Plnkr
I'm using Select2 library for autocomplete(directive name) with angularjs single-page. But I have a trouble with get the text of selected option:
<!--$scope.testData = [{code:1, value:'Test1'}, {code:2, value:'Test2'}];-->
<select id="test" name="test" ng-model="test" autocomplete>
<option ng-repeat="obj in testData" value="{{obj.code}}">{{obj.value}}</option>
</select>
I'm using ng-repeat instead of ng-options because select2 plugin doesn't have support for that.
At this part I got the value of obj.code and save it on $scope.test, but, additionaly I need to save in a other variable the text of obj.value selected. How can I do this? Basically this is because I need to print in another step that value (not code) but I too need save the code.
Thanks for advance.
You would have to watch the test value (or ng-change if that's supported) and when it changes loop through your testData to find the object with the same code and then update your other variable for display.
Alternatively you could use ui-select which lets you set test to be the object then you can display the value or code as you need.
If I have a service that exposes an array of "selected" values (via 2 way databinding on a select2 widget), and I want to limit the length of this array to a maximum of 5 values, I can set up a $scope.$watch on the controller and if the new value from the select2 directive has a length longer than 5, set the selected list back to the old value (of 5).
This seems very messy. For a start it will mean calling $scope.$watch again needlessly, and also involves me having logic in the controller that I don't really want. As this is surely one of the main problems that angularJS was brought in to solve, is there not a better way to do this?
Update: the HTML for the widget I'm currently using
<input
id="comparison"
ui-select2="select2"
ng-controller="MyController"
ng-model="selected"
placeholder="Select options (max 10)"
>
</input>