AngularJs - two way binding in an ng-repeat with a view model

Question

I have a series of checkboxes in my ng-repeat as such:

<tr data-ng-repeat="item in blogCategory.items track by $index">
     ....
   <td>
      <label class="toggle">
      <input type="checkbox" name="checkbox-toggle" checked="checked"
         ng-model="blogCategory.items[$index].publish" ng-true-value="'YES'" ng-false-value="'NO'">
         <i data-swchon-text="YES" data-swchoff-text="NO"></i></label>
  </td>
</tr>

I have 2 category items in my sample, the first one is a false for publish, the second is a true. They are both returning as (false)/NO on the checkbox element.

The $scope vm is BlogCategory, the property/field is publish.

How do I correctly bind the input element above?

Thanks

can u make a fiddle?

Nisham Mahsin
– Nisham Mahsin

2015-01-25 12:05:59 +00:00
Commented Jan 25, 2015 at 12:05 — Nisham Mahsin
– Nisham Mahsin, Commented Jan 25, 2015 at 12:05
What does your data-schwon-text directive do?

Joel Jeske
– Joel Jeske

2015-01-25 16:16:30 +00:00
Commented Jan 25, 2015 at 16:16 — Joel Jeske
– Joel Jeske, Commented Jan 25, 2015 at 16:16

Joel Jeske · Accepted Answer · 2015-01-25 16:29:08Z

1

It looks like angular has changed parameter types for ngTrueValue and ngFalseValue from a string in 1.2.x to an expression in 1.3.x.

Try removing the single quotes around the values to make it look like

ng-true-value="YES" ng-false-value="NO"

You were probably looking at the documentation on latest as that's where it defaults to but your version may be 1.2.

https://code.angularjs.org/1.2.27/docs/api/ng/input/input%5Bcheckbox%5D

answered Jan 25, 2015 at 16:29

Joel Jeske

1,64714 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jochen van Wylick · Accepted Answer · 2015-01-25 16:03:46Z

0

Here you go: http://jsfiddle.net/nx22cwwg/1/

So your problem is at the ng-model. You want item.publish there. So in my code ( which is almost the same as yours, I didn't look at exact property names and stuff ) I have:

<ul>
    <li data-ng-repeat="item in items">
      <input type="checkbox" name="checkbox-toggle" checked="checked"
       ng-model="item.isPublished" ng-true-value="YES" ng-false-value="NO" />
        {{ item.name}}
       </li>
</ul>

answered Jan 25, 2015 at 16:03

Jochen van Wylick

5,4015 gold badges46 silver badges66 bronze badges

2 Comments

Joel Jeske Over a year ago

I don't think that is the issue, items[$index].isPublished works as well.

Jochen van Wylick Over a year ago

Good point - although it is devious in my opinion. But you are right indeed. Then I'd check the parentheses in the ng-true-value - or check any other differences with my jsfiddle.

Collectives™ on Stack Overflow

AngularJs - two way binding in an ng-repeat with a view model

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related