ngTrueValue/ngFalseValue angular directive

433 Views Asked by At

I am following an angular tutorial and I am introducing myself the ngTrueValue/ngFalseValue angular directives from checkboxes.

When I code like:

 <body>     
    <p ng-app="app" >
        <input type="checkbox" ng-model="vm.clarooscuro" ng-true-value="claro" ng-false-value="oscuro"/>
            Este campo tiene el value modificado. Ahora vale {{ vm.clarooscuro }}
    </p>        
    <script src="lib/angular.min.js"></script>
</body>

Angular says:

Error: [$injector:modulerr] http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=app&p1=%5B%24injector%3Anomod%5D%20http%3A%2F%2Ferrors.angularjs.org%2F1.4.8%2F%24injector%2Fnomod%3Fp0%3Dapp%0AG%2F%3C%40file%3A%2F%2F%2Fhome%2Fleandro%2FDevelopment%2Fangularjs%2FManualdeAngularJS-Manualcompleto%2Flib%2Fangular.min.js%3A6%3A416%0Ade%2F%3C%2F%3C%2F%3C%40file%3A%2F%2F%2Fhome%2Fleandro%2FDevelopment%2Fangularjs%2FManualdeAngularJS-Manualcompleto%2Flib%2Fangular.min.js%3A24%3A186%0Ab%40file%3A%2F%2F%2Fhome%2Fleandro%2FDevelopment%2Fangularjs%2FManualdeAngularJS-Manualcompleto%2Flib%2Fangular.min.js%3A23%3A251%0Ade%2F%3C%2F%3C%40file%3A%2F%2F%2Fhome%2Fleandro%2FDevelopment%2Fangularjs%2FManualdeAngularJS-Manualcompleto%2Flib%2Fangular.min.js%3A23%3A1%0Ag%2F%3C%40file%3A%2F%2F%2Fhome%2Fleandro%2FDevelopment%2Fangularjs%2FManualdeAngularJS-Manualcompleto%2Flib%2Fangular.min.js%3A38%3A117%0An%40file%3A%2F%2F%2Fhome%2Fleandro%2FDevelopment%2Fangularjs%2FManualdeAngularJS-Manualcompleto%2Flib%2Fangular.min.js%3A7%3A331%0Ag%40file%3A%2F%2F%2Fhome%2Fleandro%2FDevelopment%2Fangularjs%2FManualdeAngularJS-Manualcompleto%2Flib%2Fangular.min.js%3A37%3A488%0Aeb%40file%3A%2F%2F%2Fhome%2Fleandro%2FDevelopment%2Fangularjs%2FManualdeAngularJS-Manualcompleto%2Flib%2Fangular.min.js%3A41%3A249%0Ayc%2Fc%40file%3A%2F%2F%2Fhome%2Fleandro%2FDevelopment%2Fangularjs%2FManualdeAngularJS-Manualcompleto%2Flib%2Fangular.min.js%3A19%3A463%0Ayc%40file%3A%2F%2F%2Fhome%2Fleandro%2FDevelopment%2Fangularjs%2FManualdeAngularJS-Manualcompleto%2Flib%2Fangular.min.js%3A20%3A274%0AZd%40file%3A%2F%2F%2Fhome%2Fleandro%2FDevelopment%2Fangularjs%2FManualdeAngularJS-Manualcompleto%2Flib%2Fangular.min.js%3A19%3A83%0A%40file%3A%2F%2F%2Fhome%2Fleandro%2FDevelopment%2Fangularjs%2FManualdeAngularJS-Manualcompleto%2Flib%2Fangular.min.js%3A294%3A192%0Ab%40file%3A%2F%2F%2Fhome%2Fleandro%2FDevelopment%2Fangularjs%2FManualdeAngularJS-Manualcompleto%2Flib%2Fangular.min.js%3A175%3A62%0AIf%40file%3A%2F%2F%2Fhome%2Fleandro%2FDevelopment%2Fangularjs%2FManualdeAngularJS-Manualcompleto%2Flib%2Fangular.min.js%3A35%3A365%0AHf%2Fd%40file%3A%2F%2F%2Fhome%2Fleandro%2FDevelopment%2Fangularjs%2FManualdeAngularJS-Manualcompleto%2Flib%2Fangular.min.js%3A35%3A314%0A


...f e?JSON.stringify(e):e;d+=c(e)}return Error(d)}}function za(a){if(null==a||Xa(a...

How do I know what Angular want to tell me? Where is written the error message on an angular error message like above?
The kit of the matter is that the above example does not work
Regards

1

There are 1 best solutions below

0
On BEST ANSWER

I created a code in jsfiddle based on your code.

  1. I added the ng-controller directive

  2. Directive ng-true-value="'claro'" the inner value should wrap with ''

  3. since u are using the minify js of angularjs (src="lib/angular.min.js") u can add the ng-strict-di directive it will let you know if there are any missing dependency injection annotations.

  4. the last thing is the js code

    angular.module('app', []) .controller('myCtrl', function() { var vm = this; vm.clarooscuro = "claro"; })

Take a look on the demo I added in order to see the all code.