0

I'm actually not sure how to ask this question, and I'm probably using incorrect terms, so bear with me.

Angular sets up a 2-way data binding so that it makes it easy to work with the data on both sides. But what if I want to change how that data is represented?

Let me give a concrete example.

I want a form with a checkbox, which if bound directly to a model, would be stored as true or false by Angular. However, in another part of the webpage I want that value to show up as 0 or 1, not true or false.

Now sure I could go and make them use two different variables, and use ng-change or something like that to update one based on the other, but that seems overkill and convoluted.

Is there some special meta function or something I can define that lets me essentially translate the data as it goes back and forth?

jwvanderbeck
  • 67
  • 11
  • 1
    it sounds like you're looking for a formatter. Take a look at [this answer](http://stackoverflow.com/questions/22841225/angularjs-ngmodel-formatters-and-parsers) to see if it gives you what you need. – Brian S Jun 07 '14 at 20:29

3 Answers3

2

Use the ngTrueValue and ngFalseValue directives. They define what should be treated as true and false on a checkbox: https://docs.angularjs.org/api/ng/input/input%5Bcheckbox%5D

Example:

<input type="checkbox" ng-model="foo"
       ng-true-value="OK"
       ng-false-value="BOO-HOO">

The model will either have a value of "OK" or "BOO-HOO" instead of the default true and false in the above example.

Alternatively, if you want the original model to retain its default values and only draw the custom ones from another variable, you could also use the ngChange directive:

<input type="checkbox" ng-model="foo"
       ng-change="bar=foo&&'OK'||'BOO-HOO'">

Now, whenever foo changes, bar will have the corresponding alternative value. Just remember to assign bar an initial value (it will start out with no value at all).

mingos
  • 23,778
  • 12
  • 70
  • 107
  • The OP said "I want that value to show up as 0 or 1", the model should still hold true or false , it's just a change of the rendered view. – Ilan Frumer Jun 07 '14 at 20:42
  • Yes, I was just updating the answer to reflect that as you were adding your comment. – mingos Jun 07 '14 at 20:43
  • Thanks! This does what I needed it to in an elegant way. Brian S's comment about formatters though is also what I was looking for in the larger scope, but the ng-true/false setup does what I need for this specific project. – jwvanderbeck Jun 08 '14 at 02:40
0

in your controller...

$scope.getvalue(data)
{
if(data===true)
return 1; // write what ever you want...
return 0;
}

in your html page.. bind the normal one as {{$scope.data1}} and other as {{getvalue($scope.data1)}}

Srinath Mandava
  • 3,384
  • 2
  • 24
  • 37
0

You can do some nice things with ngBind:

Check this plunker: http://plnkr.co/edit/cRhLN2p5N4PmI65ps6Gp?p=preview

<input type="checkbox" ng-model="ok"> OK?

<h2>true or false: {{ ok }}</h2>
<h2>0 or 1: {{ ok ? 1 : 0 }}</h2>
Ilan Frumer
  • 32,059
  • 8
  • 70
  • 84
  • Um... ternary expressions don't work in angular expressions. You need to use `cond&&val1||val2` instead, else it will break the template :) – mingos Jun 07 '14 at 20:51
  • @mingos angularjs supports ternary expressions since version 1.1.5, check this feature https://github.com/angular/angular.js/commit/6798fec4390a72b7943a49505f8a245b6016c84b – Ilan Frumer Jun 07 '14 at 20:52
  • Thank you sir for enlightening me :). I've no idea how I missed this one. We learn something new every day, don't we? Cheers. – mingos Jun 08 '14 at 10:08