Угловой для отключения флажка ng-repeat в зависимости от значения

0

У меня есть список флажков, отображаемых с помощью ng-repeat, теперь мне нужно отключить флажок флажка на основе определенного значения.

checkbox display code

<div class="checkbox">
     <label ng-repeat="specific in specifications">
          <input ng-click="onClick(specific, newObject[specific])" id="specifications_chk" value="{{specific}}" ng-model="newObject[specific]" type="checkbox">
          {{specific}}
     </label>
</div>

Здесь я использую функцию ng-click для отключения флажка.

This is my controller code:

$scope.onClick = function(sp, checked){
        if(sp == 'Sofa_Cleaning' && checked === true){
            angular.element(document.getElementById('specifications_chk'))[0].disabled = true;
        }

        if(sp == 'Sofa_Cleaning' && checked === false){
            angular.element(document.getElementById('specifications_chk'))[0].disabled = false;
        }

    };

html view:

в коде контроллера может отключить только первое значение (IndepthHomeCleaning), так как я могу отключить Room_Cleaning, Kitchen_Cleaning, и Carpet_cleaning когда Sofa_Cleaning будет checked Изображение 174551

Я застрял в этом, помощь будет действительно оценена

  • 0
    Как насчет ng-disabled ?
  • 0
    У меня нет идеи вернуть несколько значений
Показать ещё 3 комментария
Теги:
checkbox

7 ответов

0
Лучший ответ

Если вы хотите изменить specifications массив, вам нужен новый массив и сопоставление. Определите новый объект строки для каждой спецификации. Строка спецификации доступа и ее поддержка (активна или отключена) из вашей спецификации.

http://jsfiddle.net/ms403Ly8/87/

function testCtrl($scope, $filter) {
$scope.specifications = ["IndepthHomeCleaning", "Room_Cleaning", "Kitchen_Cleaning", "Carpet_cleaning", "Sofa_Cleaning"];
$scope.specificationRows = [];

$scope.newRow = function(spec) {
    var newSpec = {
        SpecName: spec,
        IsDisabled: false,
        IsClicked: false
    };
    $scope.specificationRows.push(newSpec);
};

$scope.getRowObject = function(sp) {
    return $filter('filter')($scope.specificationRows, {
        SpecName: sp
    })[0];
};

$scope.getRowStatus = function(spec) {
    console.log($filter('filter')($scope.specificationRows, {
        SpecName: spec
    })[0].IsDisabled);
    return $scope.getRowObject(spec).IsDisabled;
};

$scope.onClick = function(sp) {
    $scope.getRowObject(sp).IsClicked = !$scope.getRowObject(sp).IsClicked;
    if (sp == 'Sofa_Cleaning') {
        $scope.getRowObject("Carpet_cleaning").IsDisabled = $scope.getRowObject(sp).IsClicked;
        $scope.getRowObject("Kitchen_Cleaning").IsDisabled = $scope.getRowObject(sp).IsClicked;
        $scope.getRowObject("Room_Cleaning").IsDisabled = $scope.getRowObject(sp).IsClicked;
    }
};

}

Пример getRowObject. Может быть, это не лучшая практика. Вы можете изменить эту функцию.

1

Я не знаю, почему вы все еще придерживаетесь jquery. Вы получаете идентификатор, когда вы пытаетесь отключить этот флажок.

,

В html идентификатор должен быть уникальным для текущей html-страницы. y ou имеют дублированные идентификаторы, и вы получаете первое значение из массива, используя [o], когда вы пытаетесь отключить.

,

Если вы строго хотите решение из того же метода, используйте следующую методологию. Используйте имя класса вместо id для флажков и используйте угловой элемент и отключите его.

Следующий код следует использовать там, где вам нужно отключить. Используйте соответствующий код на основе ваших потребностей.

    angular.forEach(document.getElementsByClassName('checkbox1'), function(value, key) {
        angular.element(value)[0].disabled = true;
        debugger
  });
0

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

$scope.specifications = [
    {name: 'Sofa_Cleaning', active: false},
    {name: 'Carpet_Cleaning', active: false},
    {name: 'Room_Cleaning', active: false},
    {name: 'Kitchen_Cleaning', active: false},
    {name: 'BathroomCleaning', active: false}
];

Шаблон:

<input type="checkbox"
    ng-bind="specific.name" 
    ng-model="specific.active"
    ng-disabled="shouldDisable(specific)">

в вашем контроллере

$scope.disableWhenSofaIsChecked = ['Room_Cleaning','Kitchen_Cleaning','Carpet_Cleaning'];
$scope.shouldDisable = function(specific) {
    var disable = $scope.disableWhenSofaIsChecked;
    if(disable.indexOf(specific.name) > -1) {
        for(var obj in $scope.specifications) {
            if(obj.name === 'Sofa_Cleaning') {
                return obj.active;
            }
        }
    }
    return false;
}

РЕДАКТИРОВАТЬ

Поэтому, если вы получаете данные спецификаций из API, вы можете просто сделать это:

SomeApi
    .get()
    .then(function(results){
        // Assuming it a promise. End result is the same for a passed-in callback
        // Assuming results is an array of names 
        $scope.specifications = results.map(function(item){
            return {
                name: item,
                active: false
            };
        });
    });
  • 0
    Спасибо, проблема в том, что я получаю это значение из API, поэтому я не могу добавить новый объект
  • 0
    @Nodemon Я не уверен, что ты имеешь в виду. Какой новый объект?
Показать ещё 4 комментария
0

У вас не должно быть одинакового идентификатора для нескольких элементов в коде. Вам нужно сделать уникальные идентификаторы элементов.

HTML:

<div ng-app ng-controller="LoginController">
  <div class="checkbox">
    <label ng-repeat="specific in specifications">
      <input id="specifications_chk{{$index}}" ng-click="onClick(specific, newObject[specific])" value="{{specific}}" ng-model="newObject[specific]" type="checkbox" /> {{specific}}
      <br>
    </label>
  </div>
</div>

JavaScript:

function LoginController($scope) {
  $scope.specifications = ['IndepthHomeCleaning',
    'Room_Cleaning',
    'Kitchen_Cleaning',
    'BathroomCleaning',
    'Carpet_cleaning',
    'Sofa_Cleaning'
  ];
  $scope.newObject = {
    'IndepthHomeCleaning': 1,
    'Room_Cleaning': 2,
    'Kitchen_Cleaning': 3,
    'BathroomCleaning': 4,
    'Carpet_cleaning': 5,
    'Sofa_Cleaning': 6
  };
  $scope.onClick = function(sp, checked) {
    if (sp == 'Sofa_Cleaning' && checked === true) {
      angular.element(document.getElementById('specifications_chk1'))[0].disabled = true;
      angular.element(document.getElementById('specifications_chk2'))[0].disabled = true;
      angular.element(document.getElementById('specifications_chk4'))[0].disabled = true;
    }

    if (sp == 'Sofa_Cleaning' && checked === false) {
      angular.element(document.getElementById('specifications_chk1'))[0].disabled = false;
      angular.element(document.getElementById('specifications_chk2'))[0].disabled = false;
      angular.element(document.getElementById('specifications_chk3'))[0].disabled = false;
    }


  };
}

JsFiddle: https://jsfiddle.net/nikdtu/f7k3kcwn/

  • 0
    следует строго избегать следующего angular.element (document.getElementById ('specific_chk1')), когда ng-disable доступно из angular.
  • 0
    Можете ли вы предоставить некоторые рекомендации от angular для поддержки вашего комментария?
0

Вы используете атрибут id, который должен быть уникальным для каждого элемента DOM. Таким образом, ваше решение будет принимать один элемент. Поэтому вы должны попробовать использовать атрибут класса и функцию document.getElementbyClass.

0

использовать ng-disabled

var angApp = angular.module('myApp', []);

angApp.controller('MyController', function MyController($scope) {
  $scope.specifications = [{"text":"IndepthHomeCleaning ", "disabled":false, "checked":false},
                           {"text":"Room_Cleaning", "disabled":false, "checked":false},
                           {"text":"Kitchen_Cleaning", "disabled":false, "checked":false},
                           {"text":"BathroomCleaning", "disabled":false, "checked":false},
                           {"text":"Carpet_cleaning", "disabled":false, "checked":false},
                           {"text":"Sofa_Cleaning", "disabled":false, "checked":false}];
  
  $scope.onClick = function(sp, checked){
    console.log(sp, checked);
        if(sp.text == 'Sofa_Cleaning' && checked){
            $scope.specifications[1].disabled = true;
            $scope.specifications[2].disabled = true;
            $scope.specifications[4].disabled = true;
        }

        if(sp.text == 'Sofa_Cleaning' && !checked){
           $scope.specifications[1].disabled = false;
           $scope.specifications[2].disabled = false;
           $scope.specifications[4].disabled = false;
        }

    };
  
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myApp" ng-controller="MyController">
  <div class="checkbox">
     <label ng-repeat="specific in specifications" style="display:block">
          <input ng-disabled="specific.disabled" ng-change="onClick(specific, specific.checked)" id="specifications_chk" value="specific.checked}" ng-model="specific.checked" type="checkbox">
          {{specific.text}}
     </label>
</div>
</div>
-2

Не используйте jquery для манипуляции с dom.

Используйте ng-change вместо ng-click. Это будет подходящим.

Здесь я обновляю plunkr.

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

https://jsfiddle.net/AvGKj/517/

Примечание. Я использовал маленький старый плагин. Пожалуйста, возьмите только логики

<div ng-controller="MyCtrl">
    <table>
    <tr ng-repeat="appObj in myAppObjects">
        <td>
        <input type="checkbox" ng-model="appObj.cb1"
        ng-disabled="appObj.disable"
        ng-change="Disable(appObj,myAppObjects)">
        {{appObj.value}}
            </td>
    </tr>
    </table>
    {{myAppObjects}}
    <br>list of checked items: {{checkedItems()}}
</div>

function MyCtrl($scope) {

        $scope.myAppObjects = [
       {id:1,value:'check1'},
       {id:2,value:'check2'},
       {id:3,value:'check3'},
       {id:4,value:'check4'},
       {id:5,value:'check5'}
       ];

      $scope.Disable=function(appObj,list)
      {
        if(appObj.value=="check5")
        {
             for(var i=0; i<list.length;i++)
           {
           if(list[i].value!="check5")
              {
                if(appObj.cb1==true)
                {
                list[i].disable=true;
                }
                else{
                list[i].disable=false;
                }
              }
           }
        }
      }
}
  • 1
    Проблема здесь в том же идентификаторе на нескольких элементах. И ваш код не является событием, решающим реальную проблему. Я предполагаю, что вы отключите все другие флажки, но он должен быть избирательным согласно описанному вопросу.
  • 0
    Если вы думаете, что id является реальной проблемой для флажка, то я добавил тот же идентификатор для флажков. Пожалуйста, проверьте plnkr jsfiddle.net/AvGKj/518 . Ему нужен ответ, как, ему нужно отключить некоторые конкретные флажки на основе одного значения флажка. Я добавил, как, чтобы отключить все флажки. Я надеюсь, что у него есть простое логическое мышление, чтобы изменить условие в контроллере на основе требования.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню