複選框列表中斷，爲什麼？和最佳的Angularjs方式？

我不明白這一點，但我懷疑我做錯了什麼，或者是非角度的方式。複選框列表中斷，爲什麼？和最佳的Angularjs方式？

我有一個複選框列表內ng-repeat。它控制器從JSON加載列表。非常簡單。然後，我在每個結果複選框上使用指令（汽車選擇）。該指令調用主$範圍內的函數（selectBrand（））。這將遍歷所選的複選框，如果checked == true，則添加到$ scope.brand。我添加了一個文本框，使得$ scope.brand填充它，我已經將其設置爲必需的，以便它觸發內置的驗證例如：

HTML：

<div ng-repeat="v in viewModel"> 
    <label class="checkbox"> 
    <input type="checkbox" ng-model="v.c" ng-checked="v.c" />{{v.n}} 
    </label> 
</div> 
<input type="text" name="brands" ng-model="brands" car-select required/> <br>

JS ：

$scope.selectBrand = function() { 
    var selectedBrands = []; 
    angular.forEach($scope.viewModel, function(v){ 
     if (v.c) 
     selectedBrands.push(v.v); 
    }) 
    if (selectedBrands.length > 0) 
     $scope.brands = selectedBrands; 
    else 
     $scope.brands = null; 
    }

DIRECTIVE：

app.directive('carSelect', function() { 
    return function(scope, element) { 
    element.bind('change', function() { 
     scope.selectBrand(); 
    }) 
    } 
});

這是我不明白的怪異部分。花了一段時間才弄清楚這個特定的路線正在使整個事情發揮作用。如果我在頁面中添加以下內容，則一切正常。但是，如果我刪除它，整個事情就會破裂。爲什麼？！

<div>{{selectBrand()}}</div>

這就像整個事情沒有綁定，除非上述內容在HTML中被調用。它在指令中被調用，並且我嘗試將該調用放入clickButton（）函數中，但最終它會中斷。無論哪種方式，如果刪除上述內容，則文本框的實時更新似乎失敗。我很想得到的我怎麼做錯事了很好的解釋，以及如何我可以修復:)

PLUNKER： http://plnkr.co/edit/4QISKcq7YYH678YLsTTF?p=preview

來源

2013-05-06 jzm

你可以通過你的公共活躍者，要做更新。 – timactive 2013-05-06 08:01:17

如果您不是作者，更新它的典型方法是「分叉」它。然後將新的URL鏈接回您的更新版本的plunk。 – jzm 2013-05-06 08:03:40

這對你沒問題？ – timactive 2013-05-06 10:40:32

好吧，我創建叉;-)

只有數據

更新變量檢查

模型：

{"cars": 
    [ 
    {"v":"m","n":"Mini","c":false}, 
    {"v":"c","n":"Corvette","c":true}, 
    {"v":"b","n":"BMW","c":true}, 
    {"v":"l","n":"Lamborghini","c":true}, 
    {"v":"f","n":"Ferrari","c":false} 
    ] 
}

只希望檢查：

$scope.brands = $filter('filter')($scope.viewModel, {c: true});

當你想更新變量控制器，以便使用手錶的型號變化

$scope.$watch('viewModel', function(newval, oldval){ 
         if (oldval != newval) 
         { 
         $scope.brands = $filter('filter')($scope.viewModel, {c: true}); 
          } 
          },true 
         ); 
    });

看到http://plnkr.co/edit/PnABre?p=preview

來源

2013-05-06 08:57:55 timactive

感謝您的回覆。有趣的是，我認爲$手錶通常是不好的做法。但我想在HTML中的功能幾乎就像一個$手錶，因爲它不斷被解僱。無論如何，使用上述技術，這是一個更加精美的玩意兒。 HTTP：// plnkr。co/edit/hLD9zA？p =預覽 – jzm 2013-05-06 14:02:42

$僅當您更改scope.model時纔會觸發。您可以在watch函數中添加一個斷點來分析comportment。 – timactive 2013-05-06 14:16:11

我一個正確的驗證更新普拉克，http://plnkr.co/edit/PnABre?p=preview – timactive 2013-05-06 14:36:37

複選框列表中斷，爲什麼？和最佳的Angularjs方式？

回答

相關問題