Angular JS ng模型在從下拉列表中選擇變得無效

我是角js的新手。我正在創建一些應用程序，我從下拉列表中選擇一個值，並將所選值與ng-model關聯。但是我發現ng模型實際上變爲null而不是gettting一個值。我的整個代碼是：Angular JS ng模型在從下拉列表中選擇變得無效

<html> 

<head> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script> 
</head> 
<body> 
<div ng-app="app"> 
    <div ng-controller="MyCtrl"> 
     <h2>Select one Item from left and one Item from right</h2> 
     <select ng-model="leftmodel" 
       ng-change="ChangeOptions()" 
       ng-options="option as option.value disable 
    when option.disabled for option in left"> 
     </select> 

     <select ng-model="rightmodel" 
       ng-change="ChangeOptions()" 
       ng-options="option as option.value disable when option.disabled for option in right"> 

     </select> 
    </div> 
</div> 
<script> 
    var module = angular.module("app", []); 
    module.controller("MyCtrl", 
      function($scope) { 
       $scope.left = [{ 
        "name": "apple", 
        "value": "Nice Apple", 
        "disabled": false 
       }, { 
        "name": "orange", 
        "value": "Yellow Orange", 
        "disabled": true 
       }, { 
        "name": "berry", 
        "value": "Blue Berry", 
        "disabled": false 
       }]; 

       $scope.right = [{ 
        "name": "apple", 
        "value": "Nice Apple", 
        "disabled": true 
       }, { 
        "name": "orange", 
        "value": "Yellow Orange", 
        "disabled": false 
       }, { 
        "name": "berry", 
        "value": "Blue Berry", 
        "disabled": false 
       }]; 

       $scope.leftmodel = $scope.left[0]; 
       $scope.rightmodel = $scope.right[1]; 
       $scope.ChangeOptions = function() { 
        var size = $scope.left.length; 
        console.log(size); 
        console.log($scope.leftmodel); 
        console.log($scope.rightmodel); 
        for (var i = 0; i < size; i++) { 
         if ($scope.left[i].name === $scope.rightmodel.name) { 
          $scope.right[i].disabled = true; 
         } else { 
          $scope.right[i].disabled = false; 
         } 
        } 

        for (var i = 0; i < size; i++) { 
         if ($scope.right[i].name === $scope.leftmodel.name) { 
          $scope.left[i].disabled = true; 
         } else { 
          $scope.left[i].disabled = false; 
         } 
        } 
       }; 

      } 
    ); 
</script> 
</body> 
</html>

我也有一個Codpen 在控制檯我得到以下錯誤：

3 Object { $$hashKey: "object:5", disabled: false, name: "berry", value: "Blue Berry" } Object { $$hashKey: "object:7",
disabled: false, name: "orange", value: "Yellow Orange" } 3 null Object { $$hashKey: "object:7", disabled: true, name: "orange", value: "Yellow Orange" } "TypeError: Cannot read property 'name' of null at ChildScope.$scope.ChangeOptions (pen.js:87:58) at fn (eval at compile (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:15156:15), :4:159) at ChildScope.$eval (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:17972:28) at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:25711:13 at Object. (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:28536:9) at forEach (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:357:20) at Object.$$writeModelToScope (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:28534:5) at writeToModelIfNeeded (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:28527:14) at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:28521:9 at validationDone (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:28446:9)" 3 null null "TypeError: Cannot read property 'name' of null at ChildScope.$scope.ChangeOptions (pen.js:79:58) at fn (eval at compile (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:15156:15), :4:159) at ChildScope.$eval (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:17972:28) at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:25711:13 at Object. (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:28536:9) at forEach (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:357:20) at Object.$$writeModelToScope (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:28534:5) at writeToModelIfNeeded (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:28527:14) at https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:28521:9 at validationDone (https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js:28446:9)" Do anyone have any idea why this is happening. What i want to do is select a value from left drop down menu and dont allowing the user to select the same value from other drop down list. That meansif a user selects some value from left select box he will not be able to select that from right select box and vice versa.

來源

2017-01-10 Md Johirul Islam

試試這個。

$scope.ChangeOptions = function() { 

     var lsize = $scope.left.length; 
     var rsize = $scope.left.length; 
     for (var i = 0; i < lsize; i++) { 

     console.log($scope.left[i]); 
     if ($scope.left[i].name === $scope.rightmodel.name) { 
      $scope.left[i].disabled = true; 
     } else { 
      $scope.left[i].disabled = false; 
     } 
     } 

     for (var i = 0; i < rsize; i++) { 
     if ($scope.right[i].name === $scope.leftmodel.name) { 
      $scope.right[i].disabled = true; 
     } else { 
      $scope.right[i].disabled = false; 
     } 
     } 
    };

典筆：https://codepen.io/anon/pen/dNYLpN

來源

2017-01-10 04:00:44 Deep

不過我沒有收到什麼是我的代碼，並使得它的工作 –

@MdJohirulIslam你的條件語句是向後什麼神奇的變化在你的代碼的問題。在原始代碼中，如果左側匹配，則禁用右側，反之亦然。這會導致相反的下拉列表突然無效，導致其更改，導致另一個摘要循環，現在會導致第一個下拉列表也設置爲無效值。如果左側匹配，此代碼將更改左側，如果右側匹配，則代碼右側匹配，這將起作用。 – Claies

@Claies謝謝，很好解釋，這裏是你如何看到這種情況發生和查看當模型由於這個變爲null .https：//codepen.io/anon/pen/YNybed – Deep

Angular JS ng模型在從下拉列表中選擇變得無效

回答

相關問題