Estoy tratando de entender a los observadores, pero me he encontrado con un problema un poco extraño.

Tengo código como este:

HTML

<div ng-app='dummyApp'>
  <div ng-controller="SampleController as sample">
    <input type="checkbox" ng-model="sample.toggleValue" />
    <p ng-model="sample.toggleValue"></p>
    <textarea ng-model = "sample.toggleValue"></textarea>
    <p ng-model="sample.text"></p>
  </div>
</div>

JS

(function() {
    angular.module('dummyApp', []);
    angular.module('dummyApp')
        .controller('SampleController', SampleController);

    function SampleController($scope) {
        var vm = this;

        vm.text = "";


        $scope.$watch('sample.toggleValue', function(newVal, oldVal) {

            console.log({newval: newVal, old: oldVal});
            vm.text = vm.text + ";";
        });

    }
})();

El console.log funciona correctamente y muestra los valores a medida que se cambian en la consola. Pero ni el valor de toggleValue ni el valor de text aparecen en el navegador; ambos <p> permanecen vacíos (en realidad, quiero tener un valor predeterminado en las etiquetas p que no esté relacionado con la variable en el modelo ng (como )). Revisé sus clases y son ng-pristine, ng-untouched y ng-empty.

Sin embargo, <textarea> muestra el valor true/false como se esperaba.

No estoy usando $ scope en ninguna parte del DOM, por lo que no creo que este sea un problema de herencia. También he verificado el alcance con Batarang.

Estoy perdido aquí.

PD Aquí hay un violín: https://jsfiddle.net/6bud04er/

0
cst1992 12 ene. 2017 a las 21:20

2 respuestas

La mejor respuesta

No hay texto en las etiquetas p, es por eso que no son visibles. No utilice ng-model para {{ X1}} etiquetas, ese no es su propósito. ngModel enlaza un input al ModelController. Si desea que se agregue el valor a las etiquetas <p>, use ng-bind o use la sintaxis de {{ expression }} angular como se muestra a continuación.

(function() {
    angular.module('dummyApp', []);
    angular.module('dummyApp')
        .controller('SampleController', SampleController);

    function SampleController($scope) {
        var vm = this;

        vm.text = "";

        $scope.default = "default string";
        $scope.$watch('sample.toggleValue', function(newVal, oldVal) {

            console.log({newval: newVal, old: oldVal});
            //vm.text += vm.text + ";";
        });

    }
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='dummyApp'>
  <div ng-controller="SampleController as sample">
    <input type="checkbox" ng-model="sample.toggleValue" />
    <textarea ng-model = "sample.text"></textarea>
    <p ng-hide="sample.toggleValue">toggle is false</p>
    <p>{{default}}</p>
  </div>
</div>
2
Supradeep 13 ene. 2017 a las 06:54

Para mostrar un valor booleano, simplemente elimine ng-model en la etiqueta p y use <p>{{ sample.toggleValue }}</p>

0
Oyeme 12 ene. 2017 a las 18:29