'オプション' HTML5要素を無効にする 'AngularJS'の方法は何ですか？

'オプション' HTML5要素を無効にする 'AngularJS'の方法は何ですか？'オプション' HTML5要素を無効にする 'AngularJS'の方法は何ですか？

私はAngularJS v1.2.25を使用しています。

<!-- CODE BEGIN --> 
<!DOCTYPE html> 
<html> 
    <head> 
     <script data-require="[email protected]" data-semver="2.0.0" src="https://code.angularjs.org/2.0.0-beta.6/angular2.min.js"></script> 
     <link rel="stylesheet" href="style.css" /> 
     <script src="script.js"></script> 
    </head> 
    <body> 
     <select> 
      <option value="volvo">Volvo</option> 
      <option value="saab">Saab</option> 
      <option value="opel">Opel</option> 
      <option value="audi">Audi</option> 
     </select> 
     <select> 
      <option value="volvo">Volvo</option> 
      <option value="saab">Saab</option> 
      <option value="opel">Opel</option> 
      <option value="audi">Audi</option> 
     </select> 
     <select> 
      <option value="volvo">Volvo</option> 
      <option value="saab">Saab</option> 
      <option value="opel">Opel</option> 
      <option value="audi">Audi</option> 
     </select> 
     <select> 
      <option value="volvo">Volvo</option> 
      <option value="saab">Saab</option> 
      <option value="opel">Opel</option> 
      <option value="audi">Audi</option> 
     </select> 
    </body> 
</html> 
<!-- CODE END -->

私が「形式」要素を作ってるんだし、いくつかの「オプション」要素タグと要素タグを「選択」のいくつかがあります。

'option'要素タグは、4つの 'select'要素タグ全体で同一の属性を持ちます。

私はユーザーに自動車メーカーのランクを付けたいと思っています。彼らがメーカーを選んだとき、私は4つの「選択」要素タグすべてでその「オプション」要素を無効にしたいと思います。

私は次の質問/回答を見つけましたが、これは 'AngularJS'の方法ですか？（Disable option in select）

彼らはjQueryを使用していますが、私はAngularJSに 'jQuery Lite'が含まれていることを知っていますが、その実装は 'AngularJS'ですか？

私はAngularJSサイトでこの文書を見つけました： htt9 $：// plnkrこれは、付随するPlunkリンクです//docs.angularjs.org/api/ng/directive/ngDisabled

： htt9 $ .co/edit /？p = preview

AngularJSチームが提供する例を理解できます。私はng-modelおよび/またはng-disabledを変更することを考えていました。 AngularJSの「コア」ファイルを「ハッキングする」のを避けたいと思います。

ng-modelおよび/またはng-disabledをデカップリングしますか。

また、カスタムフィルタを作成する必要がありますか？

私はjQueryのバックグラウンドから来ており、できるだけAngularJSのベストプラクティスを遵守しようとしています。私は過剰な「技術的負債」を防ぎたい。

出典

2016-07-01 P82

私にはラジオボタンが選択よりも使用するように、より良いフォームコンポーネントを思われます。ラジオボタンで試してみるか、リストが長すぎますか？ – jpumford

どのような状態を無効にしたいのですか？ –

@jpumfordええ、ラジオボタンが良いでしょう。リストは静的ではなく、増加する可能性があります。 – P82

選択オプションを無効にする方法は、それがどのように行われたかを示すng-disabled="expression" This plunkerです。

あなたがそうのような4つの選択することができた場合に：model.optionsはオプション

var model = $scope.model = { 
    options: [ 
     {label: 'Volvo', value: 'volvo'}, 
     {label: 'Audi', value: 'audi'}, 
     {label: 'Saab', value: 'saab'}, 
     {label: 'Opel', value: 'opel'}, 
    ], 
    should_disable: should_disable 
}

その関数のshould_disable（C、NUM）のリストをすることになっている

<select ng-model="model.selected1"> 
    <option ng-repeat="c in model.options" value="{{c.value}}" ng-disabled="model.should_disable(c, 1)">{{c.label}}</option> 
</select> 
<select ng-model="model.selected2"> 
    <option ng-repeat="c in model.options" value="{{c.value}}" ng-disabled="model.should_disable(c, 2)">{{c.label}}</option> 
</select> 
<select ng-model="model.selected3"> 
    <option ng-repeat="c in model.options" value="{{c.value}}" ng-disabled="model.should_disable(c, 3)">{{c.label}}</option> 
</select> 
<select ng-model="model.selected4"> 
    <option ng-repeat="c in model.options" value="{{c.value}}" ng-disabled="model.should_disable(c, 4)">{{c.label}}</option> 
</select>

です車cがnum以外の<select>で選択されている場合はtrueです。

function should_disable(c, selectnum){ 
    var other_selectnums = [1,2,3,4].filter(function(n){ 
     return n != selectnum; 
    }); 
    var is_selected_somewhere_else = false; 
    for(var i=0; i<other_selectnums.length; i++){ 
     var otherselectnum = other_selectnums[i]; 
     if(c.value == model['selected'+otherselectnum]){ 
     is_selected_somewhere_else = true; 
     break; 
     } 
    } 
    return is_selected_somewhere_else; 
    }

Here's a fully working plunkr

出典

2016-07-02 02:47:46

'オプション' HTML5要素を無効にする 'AngularJS'の方法は何ですか？

答えて

関連する問題