I have to develop a configuration screen where I have to fetch a set of key pair values from db and show in the UI to update the configuration. Here, when the value is 'TRUE' or 'FALSE', I have to show the input control as checkbox and for the rest of the values, I have to show the input control as textbox. I have used ng-repeat for single input control. But here I need to show two input controls (checkbox / textbox) based on the value. Can you please give me an idea on how to use ng-repeat to implement with multiple input controls ?
1 Answer
How about something like this:
<div ng-repeat="item in items"
ng-init="item.showCb = item.value == 'TRUE' || item.value == 'FALSE'">
<input type="checkbox"
ng-if="item.showCb" />
<input type="text"
ng-if="!item.showCb" />
</div>
3 Comments
bngk
Thanks for your reply..I have edited and worked on binding part where i am not able to bind check box properly for the first three clicks and also after three clicks though the value is updated in the model, it holds boolean value though i mentioned ng-true-value="true" and ng-false-value="false".. Please check in my fiddle jsfiddle.net/bngk/7urrobaa
bngk
One more observation... By default when all the checkboxes are false, it works fine and only when the checkboxes are set to true by default, it causes the problem
devqon
That is because you bind to a 'true'-string, instead of a native true-boolean (
value = "true" vs value = true). What you can do instead is set the ng-true-value="'true'" with quotes (also for the false value). See this jsfiddle