2015-03-07 5 views
0

Я собрал то, что, по моему мнению, было бы очень простым примером того, как я мог бы скрыть функцию из проверки флажка в угловом и проверить эту функцию, чтобы увидеть новое значение флажка и соответственно отображать или не отображать сообщение. Он работает, но только после того, как я проверил и снял флажок по крайней мере один раз. По этой причине я решил, что мне просто нужно установить значение флажка в значение false, и это позаботится о проблеме, но это не так. Может ли кто-нибудь помочь мне настроить его, чтобы заставить его работать, и если да, возможно, объясните, почему мое мышление ошибочно, что я не понимаю о состоянии $ scopes. BTW также перевернуто, что означает, что когда я устанавливаю флажок, сообщение уходит, и когда я сниму его, он говорит, что он проверен.Указывать флажок отмечен угловым

Я делаю эти упражнения, чтобы лучше понять, как работают угловые работы, и я знаю, что это проблема javascript, но я до сих пор не понял ее. Любая помощь приветствуется

app.js

var formApp = angular 

    .module('formApp', []) 
    .controller('formController', function($scope) { 

    $scope.formData = {}; 

    $scope.redCheckFunction = function() { 
    if ($scope.formData.favoriteColors.red == true){ 
     $scope.redMessage = "red is checked"; 
    } else { 
     $scope.redMessage = ""; 
    } 
    }; 

}); 

index.html

<!DOCTYPE html> 
<html> 
<head> 
    <script src="http://code.angularjs.org/1.2.13/angular.js"></script> 
    <script src="app.js"></script> 
</head> 

<!-- apply our angular app and controller --> 
<body ng-app="formApp" ng-controller="formController"> 
    <div> 
    <h2>Angular Checkboxes</h2> 
    <form> 
    <div class="form-group"> 
     <label>Name</label> 
     <input type="text" class="form-control" name="name" 
      ng-model="formData.name"> 
     <label>Description</label> 
     <input type="text" class="form-control" name="description" 
      ng-model="formData.description"> 
    </div> 

    <!-- MULTIPLE CHECKBOXES --> 
    <label>Favorite Colors</label> 
    <div class="form-group"> 
     <label class="checkbox-inline"> 
     <input type="checkbox" name="favoriteColors" 
      ng-model="formData.favoriteColors.red" 
      ng-init="favoriteColors.red.disabled=false" 
      ng-click="redCheckFunction()"> Red 
     </label> 
     <label class="checkbox-inline"> 
     <input type="checkbox" name="favoriteColors" 
      ng-model="formData.favoriteColors.blue"> Blue 
     </label> 
     <label class="checkbox-inline"> 
     <input type="checkbox" name="favoriteColors" 
      ng-model="formData.favoriteColors.green"> Green 
     </label> 
    </div> 

    <button type="submit" class="btn btn-danger btn-lg">Send Away!</button> 
    <h2>{{redMessage}}</h2> 
    </form> 

    <h2>Sample Form Object</h2> 
    <pre> 
    {{ formData }} 
    </pre> 

</div> 
</body> 
</html> 

Я создал перо, чтобы сделать вещи проще: Checkbox Pen

+0

Возможно, вам нужно использовать 'ng-value-true' и' ng-value-false' –

+0

Привет, Авраам, я попробовал это. И хотя это хороший способ создать значение по умолчанию, моя проблема заключалась в том, что я использовал ng-click вместо ng-change. Но в этом вопросе я узнал и о 'ng-value- *' и 'ng-change', и хотя' ng-value- * 'не помог этой конкретной проблеме, я все равно ушел с информацией обоим. Спасибо за комментарий! Я ценю любого, кто пытается помочь! –

ответ

1

нг нажмитеis fired before the model is updated:

Обратите внимание, что ngClick события будут происходить до того, как модель обновляется.

Вы должны использовать ng-change директиву:

оценить данное выражение, когда пользователь изменяет вход.

http://codepen.io/anon/pen/azaJob

<label>Favorite Colors</label> 
     <div class="form-group"> 
      <label class="checkbox-inline"> 
       <input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.red" ng-init="formData.favoriteColors.red.disabled=false" ng-change="redCheckFunction()"> Red 
      </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.blue"> Blue 
      </label> 
      <label class="checkbox-inline"> 
       <input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.green"> Green 
      </label> 
     </div> 

При входе в функцию redCheckFunction значение уже обновляется.

+0

Я понял, что это так, но не знал об изменении директивы, позвольте мне использовать это, и я обновлю через минуту. –

+0

Я добавил комментарий и ссылку: ng-click уволен до обновления модели, – StarsSky

+0

Да, я понял, я благодарю вас за то, что вы потратили, чтобы ответить на вопрос и помочь мне! Сейчас работает отлично, и я учусь! –

Смежные вопросы