Модель Json не обязательна в угловых - PullRequest
Новая
       0

Модель Json не обязательна в угловых

0 голосов
/ 01 октября 2018

Приложение Angular 1 здесь.

У меня есть этот json-файл с именем data.json: 

[
{
  "rejectionType": "REJECTION_1",
  "user": "ALL",
  "selected": false
},
{
  "rejectionType": "REJECTION_2",
  "user": "MALE",
  "selected": false
},
{
  "rejectionType": "REJECTION_3",
  "user": "FEMALE",
  "selected": false
}
]

В контроллере я делаю следующее: 

$http.get('data.json').then(function(response) {
var rejectionData = response.data;
myctrl.currentRejections = _.filter(rejectionData, function(item, index) {
  return _.contains(["ALL", "MALE"], item.user);
})
console.log("myCtrl.currentRejections:",myCtrl.currentRejections);
$("#modRejectionReason").modal("show");
});

модал в представлении выглядит так: 

<div id="modRejectionReason">
        <div class="modal-body">
            <p>
                <div ng-repeat="allrejections in myctrl.currentRejections">
                    <p>
                        <input type="radio" name="selected" ng-model="allrejections.selected" />
                        {{allrejections.rejectionType}}
                    </p>
                </div>
            </p>
        </div>
        <div class="modal-footer">
            <button type="button" ng-click="myctrl.func()">OK</button>
        </div>
    </div>
</div>
</div>

А потом в контроллере у меня так: 

var declineInvite = function () {
console.log("myctrl.currentRejections:",myctrl.currentRejections);
}

В логе я вижу, что когда появляется модал, то переменная myCtrl.currentRejections печатается.И это массив со всеми отфильтрованными элементами.Для каждого элемента я вижу, что поле selected является ложным.

Когда я проверяю переключатель и затем нажимаю на OK-button, запускается функция func.Даже здесь те же данные печатаются в консоли.Однако для тех переключателей, которые были нажаты в json, значение для поля selected не определено.Что мне здесь не хватает?

1 Ответ

0 голосов
/ 01 октября 2018

Вам нужно дать переключателям значение, которое нужно установить при их проверке. 

<input type="radio" name="selected" ng-model="allrejections.selected" ng-value="true"/>

Проблема с выполнением этого в вашем текущем коде заключается в том, что selected:true никогда не будет сброшен, поэтому япредложите добавить новое значение на контроллере с именем selectedRejection и использовать его в качестве модели и установить значение для фактического объекта отклонения.Это означает, что вы также можете избавиться от выбранного свойства в данных JSON! 

var myApp = angular.module('myApp', []).controller("MyCtrl", MyCtrl);

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl() {
  var MyCtrl = this;
  MyCtrl.currentRejections = [{
      "rejectionType": "REJECTION_1",
      "user": "ALL",
      "selected": false
    },
    {
      "rejectionType": "REJECTION_2",
      "user": "MALE",
      "selected": false
    }
  ]

  MyCtrl.selectedRejection = null;

  MyCtrl.submit = function() {
    console.log(MyCtrl.selectedRejection)
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp">
  <div ng-controller="MyCtrl as MyCtrl">
    <div ng-repeat="allrejections in MyCtrl.currentRejections">
      <p>
        <input type="radio" name="selected" ng-model="MyCtrl.selectedRejection" ng-value="allrejections" /> {{allrejections.rejectionType}}
      </p>
    </div>


    <button type="button" ng-click="MyCtrl.submit()">OK</button>
  </div>
</body>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...