각도 선택한 값 가져 오기

입력란에서 선택한 항목을 가져올 수 없습니다. 그럼 내 컨트롤러각도 선택한 값 가져 오기

<ul> 
    <li ng-repeat='shoe in shoebox'> 
    <input type='checkbox' ng-model='shoe.selected' id='shoe-{{shoe.name}}'> 
    <label for='shoe-{{shoe.name}}'>{{shoe.name}}</label> 
    </li> 
    <button ng-click='whatIsChecked(shoe.selected)'>Apply</button> 
</ul>

$scope.whatIsChecked = function(selectedThing) { 
    console.log(selectedThing); 
};

위의 반환 undefined.

목록 항목이 올바르게 표시되지만 shoe.name 또는 확인 된 항목이 ng-model에 저장되지 않은 것 같습니다.

출처

2017-04-24 bruh

당신이 그것을 변경할 때 ** 업데이트 ** 구두 상자의 데이터인가? –

나는 shoebox의 데이터를 변경하지 않을 것입니다. 현재 그것은 정확하게 다른 신발을 모은 것입니다. 관련 체크 박스를 선택하면 해당 항목을 모델에 저장하고 싶습니다. 희망이 귀하의 질문에 대한 답변 – bruh

변수 shoe은 ng-repeat 블록에서만 유효합니다.

선택한 것을 얻으려면 filter을 시도해야합니다.

UPD : 선택한 속성을 가지고 있지 않기 때문에 , 당신은 ng-click 이벤트를 트리거로 다른 곳에서 선택한 항목을 유지해야합니다.

은 아래 코드를 참조하십시오.

angular.module("app", []) 
 
    .controller("myCtrl", function($scope) { 
 
    
 
    $scope.checkedShoes = []; 
 
    
 
    $scope.shoebox = [{ 
 
     name: 'shoe1' 
 
     }, 
 
     { 
 
     name: 'shoe2' 
 
     }, 
 
     { 
 
     name: 'shoe3' 
 
     }, 
 
     { 
 
     name: 'shoe4' 
 
     } 
 
    ]; 
 
    
 
    $scope.save = function(e, shoe) { 
 
     if (e.target.checked) { 
 
     $scope.checkedShoes.push(shoe); 
 
     } else { 
 
     var index = $scope.checkedShoes.indexOf(shoe); 
 
     if(index > -1) { 
 
      $scope.checkedShoes.splice(index, 1); 
 
     } 
 
     } 
 
     
 
    }; 
 
    
 
    $scope.whatIsChecked = function() { 
 
     //var selected = $scope.shoebox.filter(function(item) { 
 
     // return item.selected === true; 
 
     //}); 
 
     
 
     console.log($scope.checkedShoes); 
 
    } 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
<div ng-app="app" , ng-controller="myCtrl"> 
 
    <ul> 
 
    <li ng-repeat='shoe in shoebox'> 
 
     <input type='checkbox' ng-click="save($event, shoe)" id='shoe-{{shoe.name}}'> 
 
     <label for='shoe-{{shoe.name}}'>{{shoe.name}}</label> 
 
    </li> 
 
    <button ng-click='whatIsChecked()'>Apply</button> 
 
    </ul> 
 
</div>

출처

2017-04-24 02:19:39 Pengyy

내가 당신의 발췌 문장을 실행할 수있는 훌륭한 작동하지만 - 내가 시도 할 때 -'console.log (선택)'에서 반환 된 빈 배열'[]'을 얻고 있습니다. 나는 당신이 당신의 예에서했던 것처럼 각 구두를 거짓으로 명시 적으로 설정하지 않기 때문에 그것을 생각합니다. 각 신발 오브젝트에'selected' 속성이 필요 없도록 수정 될 수 있습니까? – bruh

@ bruh 그래서 'shoebox'에 선택한 정보를 저장하지 않는다는 뜻입니까? – Pengyy

ng-model의 예제 이름으로'shoe.selected'를 사용했습니다. 나는 각 신발 객체에 실제로'selected' 속성을 가지고 있지 않습니다 (당신의 예제에서와 같이). * 나는 이것이'console.log (selected)'를 시도 할 때 빈 배열을 반환하는 이유라고 생각한다. – bruh

할 수 있습니다 당신이 선택 여러 항목이있을 때 쉽게이되는 angular.Foreach를 사용하여 선택한 항목을 얻을.

$scope.checkedItems = []; 
     angular.forEach($scope.shoebox, function(value, key) { 
      if (value.selected) 
      $scope.checkedItems.push(value.name); 
});

데모

var app = angular.module('myApp', []); 
 
app.controller('myCtrl', function($scope) { 
 
    $scope.shoebox = [{ 
 
    name: 'Reboke', 
 
    selected: false 
 
    }, { 
 
    name: 'woodlands', 
 
    selected: false 
 
    }, { 
 
    name: 'Nike', 
 
    selected: false 
 
    }, { 
 
    name: 'Fila', 
 
    selected: false 
 
    }]; 
 
    $scope.checkedItems = function() { 
 
    $scope.checkedItems = []; 
 
    angular.forEach($scope.shoebox, function(value, key) { 
 
     if (value.selected) 
 
     $scope.checkedItems.push(value.name); 
 
    }); 
 

 
    } 
 
});

<html> 
 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS </title> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="https://code.angularjs.org/1.4.7/angular.js"></script> 
 
</head> 
 
<body ng-app="myApp" ng-controller="myCtrl"> 
 
    <ul> 
 
    <li ng-repeat='shoe in shoebox'> 
 
    <input type='checkbox' ng-model='shoe.selected' id='shoe-{{shoe.name}}'> 
 
    <label for='shoe-{{shoe.name}}'>{{shoe.name}}</label> 
 
    </li> 
 
    <button ng-click='checkedItems()'>Apply</button> 
 
    Checked items are: {{checkedItems}} 
 
</ul> 
 
     
 
</body> 
 
</html>

출처

2017-04-24 02:22:21 Sajeetharan

각도 선택한 값 가져 오기

답변

관련 문제