奇妙な行動アンギュラ駆動選択リスト

Question

私は私の問題を学び、解決するためのガイダンスとして使用@Meligyによる「によってAngular.JSのNG-オプションを使用してselect要素&トラックの初期選択値を設定する方法」紙によると、選択リスト（ng-options）を実装すると、私はまだ奇妙なcollat​​eraleの動作に遭遇します。

基本的な動作は最終的に何をすべきかを示していますが、Test Plunkを参照しても、そのリスト内の選択した項目には依然として奇妙な動作が発生します。私のテストではないが、私の開発サイトに実装されている。

app.controller("TaskEditCtrl", function($scope) { 

    $scope.loadTaskEdit = loadTaskEdit; 

    function loadTaskEdit() { 
    taskLoadCompleted(); 
    tasktypesLoadCompleted(); 
    } 

    function taskLoadCompleted() { 
    $scope.tasks = [{ 
     Id: 1, 
     Name: "Name", 
     Description: "Description", 
     TaskTypesId: 4 
     } 
    ]; 
    $scope.current_task_tasktypesid = $scope.tasks[0].TaskTypesId;  
    } 

    function tasktypesLoadCompleted() { 
    var tasktypes = [{ Id: 1, Name: "A" }, 
    { Id: 2, Name: "B" }, 
    { Id: 3, Name: "C" }, 
    { Id: 4, Name: "D" }]; 

    $scope.available_tasktypes_models = tasktypes  
    } 

    $scope.submit = function(){ 
    alert('Edited TaskViewModel (New Selected TaskTypeId) > Ready for Update: ' + $scope.tasks[0].TaskTypesId); 
    } 

    loadTaskEdit();  
}); 

HTML

<form class="form-horizontal" role="form" novalidate angular-validator name="editTaskForm" angular-validator-submit="UpdateTask()">   
     <div ng-repeat="task in tasks">    
      <div> 
      <select ng-init="task.TaskTypes = {Id: task.TaskTypesId}" 
      ng-model="task.TaskTypes" 
      ng-change="task.TaskTypesId = task.TaskTypes.Id" 
      ng-options="option_tasttypes.Name for option_tasttypes in available_tasktypes_models track by option_tasttypes.Id"> 
      </select> 
      </div> 
     </div> 

     <div class=""> 
      <input type="submit" class="btn btn-primary" value="Update" ng-click="submit()" /> 
     </div> 

     </form> 

としては、それが行うことになって、まさに示している私のテストplunkを参照してください、と述べました。さらに、5つの自己説明的な画像を使用して、私は自分のトロルビービーが問題をより明確にすることを望む。

私はとても面倒なことを理解するために少し失われています。私の '水'は私に何かが間違っているか、CSSで行方不明であることを伝えています。彼らの誰かに顔が似ていたのですか？何が私にこのトラブルを引き起こす可能性がありますか？誰かに手掛かりがありますか？事前に

おかげで

[1 [] 2 [] 3 [] 4

どうやら私は、CSSの新人です。どんな提案も歓迎です！

CSS

#region "style sheets" 
    bundles.Add(new StyleBundle("~/Content/css").Include(
     "~/Content/css/site.css", 
     "~/content/css/bootstrap.css", 
     "~/content/css/bootstrap-theme.css", 
     "~/Content/css/font-awesome.css", 
     "~/Content/css/morris.css", 
     "~/Content/css/toastr.css", 
     "~/Content/css/jquery.fancybox.css", 
     "~/Content/css/loading-bar.css")); 
    #endregion "style sheets" 

Answer 1

ドロップダウンでのキーは、選択したオブジェクトにモデルを設定することです。私はあなたのコードを更新して、あなたがそれが働くことを求めていると信じるように振る舞います。

主な相違点は以下のとおりです。

1. 選択したオブジェクトではなく、選択した項目のIDにドロップダウンのNG-モデルを設定します。これにより、選択したオブジェクト全体とそのすべてのプロパティにアクセスできます。

2. ng-changeバインディングを削除する - これは2ウェイデータバインディングでは不要であり、モデル上の値（ng-model用に置かれているもの）は自動的に更新されます。

3. HTMLでは、Controller $ scopeで宣言されていないプロパティを使用していました。範囲内にある利用可能な変数を反映するようにそれらを更新しました。

詳細については、角のドキュメントを参照してください。https://docs.angularjs.org/api/ng/directive/select

// Code goes here 
 

 
var app = angular.module("myApp", []); 
 

 
app.controller("TaskEditCtrl", function($scope) { 
 

 
    $scope.tasks = {}; 
 
    $scope.current_task_tasktypesid = null; 
 
    $scope.selected_task_tasktype = null; 
 

 
    $scope.loadTaskEdit = loadTaskEdit; 
 

 
    function loadTaskEdit() { 
 
    taskLoadCompleted(); 
 
    tasktypesLoadCompleted(); 
 

 
    
 
    //EDIT: DEFAULT DROPDOWN SELECTED VALUE 
 
    $scope.selected_task_tasktype = $scope.available_tasktypes_models[2]; 
 
    } 
 

 
    function taskLoadCompleted() { 
 
    $scope.tasks = [{ 
 
     Id: 1, 
 
     Name: "Name", 
 
     Description: "Description", 
 
     TaskTypesId: 4 
 
     } 
 
    ]; 
 
    $scope.current_task_tasktypesid = $scope.tasks[0].TaskTypesId; 
 

 
    } 
 

 
    function tasktypesLoadCompleted() { 
 
    var tasktypes = [{ Id: 1, Name: "A" }, 
 
    { Id: 2, Name: "B" }, 
 
    { Id: 3, Name: "C" }, 
 
    { Id: 4, Name: "D" }]; 
 
    
 
    $scope.available_tasktypes_models = tasktypes 
 

 
    } 
 
    
 
    $scope.submit = function(){ 
 
    alert('submitted model: ' + $scope.selected_task_tasktype.Id); 
 
    } 
 

 
    loadTaskEdit(); 
 

 
});

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="angular.js@*" data-semver="1.2.9" src="http://code.angularjs.org/1.2.9/angular.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
</head> 
 

 
<body ng-app="myApp" ng-controller="TaskEditCtrl as edit"> 
 

 
    <form class="form-horizontal" role="form" novalidate angular-validator name="editTaskForm" angular-validator-submit="UpdateTask()"> 
 

 
    <div ng-repeat="task in available_tasktypes_models"> 
 
     
 
     <div>Task (Id): {{task.Id}}</div> 
 
     <div>Name: {{task.Name}}</div> 
 
     <div>Descripton: {{task.Description}}</div> 
 
    </div>  
 
     <p>Current Task.TaskTypesId: {{selected_task_tasktype.Id}}</p> 
 

 
     <div> 
 
     <select 
 
     ng-model="selected_task_tasktype" 
 
     ng-options="option_tasttypes.Name for option_tasttypes in available_tasktypes_models track by option_tasttypes.Id"> 
 
     </select> 
 
     </div> 
 
     <p>{{task.TaskTypes}}</p> 
 
     <p>{{selected_task_tasktypesid = task.TaskTypes}}</p> 
 
     
 
    
 

 
    <div class=""> 
 
     <input type="submit" class="btn btn-primary" value="Update" ng-click="submit()" /> 
 
    </div> 
 

 
    </form> 
 

 
</body> 
 

 
</html>

Answer 2

まず、私は@Meligyの実装と「dball」の提案入力が正しい状態する必要がある - それは、この種の問題を把握するのに非常に有用です。だから、あなたの選択の流れに行ってください。

あなたのスタイルシートに注意してください。

最後に、私は親

<div id="editTaskWrapper"> 

の識別子としてセレクタ#editTaskWrapperの値が「白」とのスタイルのプロパティ「color」は悪い男を務めたことを考え出しました。 「色：白」というコメントを

#editTaskWrapper { 
    background-color: #337AB7; 
    /*color: white;*/ 
    padding: 20px; 
} 

で選択すると、選択リストの選択項目が表示されます。他のすべてのコントロールと値は影響を受けず、選択されたリスト項目のみが影響を受けます。