Angularjs ng-model ng-if

Question

के अंदर काम नहीं करता है, यहां समस्या दिखाई देने वाली पहेली है। http://jsfiddle.net/Erk4V/1/

ऐसा प्रतीत होता है कि अगर मेरे पास एनजी-मॉडल के अंदर एक एनजी-मॉडल है, तो मॉडल अपेक्षा के अनुसार काम नहीं करता है।

मुझे आश्चर्य है कि यह एक बग है या यदि मैं उचित उपयोग को गलत समझ रहा हूं।

<div ng-app > 
    <div ng-controller="main"> 

     Test A: {{testa}}<br /> 
     Test B: {{testb}}<br /> 
     Test C: {{testc}}<br /> 

     <div> 
      testa (without ng-if): <input type="checkbox" ng-model="testa" /> 
     </div> 
     <div ng-if="!testa"> 
      testb (with ng-if): <input type="checkbox" ng-model="testb" /> 
     </div> 
     <div ng-if="!someothervar"> 
      testc (with ng-if): <input type="checkbox" ng-model="testc" /> 
     </div> 

    </div> 
</div> 

Answer 1

ng-if निर्देश, अन्य निर्देशों की तरह एक बच्चे गुंजाइश पैदा करता है। नीचे स्क्रिप्ट (या this jsfiddle)

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js"></script> 
 

 
<script> 
 
    function main($scope) { 
 
     $scope.testa = false; 
 
     $scope.testb = false; 
 
     $scope.testc = false; 
 
     $scope.obj = {test: false}; 
 
    } 
 
</script> 
 

 
<div ng-app > 
 
    <div ng-controller="main"> 
 
     
 
     Test A: {{testa}}<br /> 
 
     Test B: {{testb}}<br /> 
 
     Test C: {{testc}}<br /> 
 
     {{obj.test}} 
 
     
 
     <div> 
 
      testa (without ng-if): <input type="checkbox" ng-model="testa" /> 
 
     </div> 
 
     <div ng-if="!testa"> 
 
      testb (with ng-if): <input type="checkbox" ng-model="testb" /> {{testb}} 
 
     </div> 
 
     <div ng-if="!someothervar"> 
 
      testc (with ng-if): <input type="checkbox" ng-model="testc" /> 
 
     </div> 
 
     <div ng-if="!someothervar"> 
 
      object (with ng-if): <input type="checkbox" ng-model="obj.test" /> 
 
     </div> 
 
     
 
    </div> 
 
</div>

तो, अपने चेकबॉक्स बदलता है testb बच्चे दायरे के अंदर नहीं, बल्कि बाहरी माता पिता गुंजाइश देखें।

नोट, कि यदि आप मूल दायरे में डेटा को संशोधित करना चाहते हैं, तो आपको किसी वस्तु के आंतरिक गुणों को संशोधित करने की आवश्यकता होगी जैसे कि मैंने जो अंतिम div जोड़ा है।

Answer 2

आप $parent का उपयोग मॉडल इस

<input type="checkbox" ng-model="$parent.testb" /> 

Answer 3

आप उपयोग कर सकते हैं ngHide(या ngShow) निर्देश की तरह माता-पिता दायरे में परिभाषित करने का उल्लेख कर सकते हैं। यह ngIf करता है के रूप में बच्चे के दायरे नहीं बनाता है।

<div ng-hide="testa"> 

Answer 4

हां, एनजी-छुपाएं (या एनजी-शो) निर्देश बाल दायरा नहीं बनाएगा।

यहाँ मेरी बात है:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js"></script> 

<script> 
    function main($scope) { 
     $scope.testa = false; 
     $scope.testb = false; 
     $scope.testc = false; 
     $scope.testd = false; 
    } 
</script> 

<div ng-app > 
    <div ng-controller="main"> 

     Test A: {{testa}}<br /> 
     Test B: {{testb}}<br /> 
     Test C: {{testc}}<br /> 
     Test D: {{testd}}<br /> 

     <div> 
      testa (without ng-if): <input type="checkbox" ng-model="testa" /> 
     </div> 
     <div ng-if="!testa"> 
      testb (with ng-if): <input type="checkbox" ng-model="$parent.testb" /> 
     </div> 
     <div ng-show="!testa"> 
      testc (with ng-show): <input type="checkbox" ng-model="testc" /> 
     </div> 
     <div ng-hide="testa"> 
      testd (with ng-hide): <input type="checkbox" ng-model="testd" /> 
     </div> 

    </div> 
</div> 

http://jsfiddle.net/bn64Lrzu/

Answer 5

आप इस तरह यह कर सकते हैं और आप आधुनिक समारोह सही काम करेंगे मुझे पता है अगर आप एक कोड कलम चाहते हैं

<div ng-repeat="icon in icons">     
       <div class="row" ng-if="$index % 3 == 0 "> 
        <i class="col col-33 {{icons[$index + n].icon}} custom-icon"></i> 
        <i class="col col-33 {{icons[$index + n + 1].icon}} custom-icon"></i> 
        <i class="col col-33 {{icons[$index + n + 2].icon}} custom-icon"></i> 
       </div> 
     </div> 

Answer 6

हमारे पास यह कई अन्य मामलों में था, हमने आंतरिक रूप से निर्णय लिया कि हमेशा नियंत्रक/निर्देश के लिए एक रैपर होना चाहिए ताकि हमें इसके बारे में सोचने की आवश्यकता न हो। यहां हमारे रैपर के साथ उदाहरण है।

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0rc1/angular.min.js"></script> 

<script> 
    function main($scope) { 
     $scope.thisScope = $scope; 
     $scope.testa = false; 
     $scope.testb = false; 
     $scope.testc = false; 
     $scope.testd = false; 
    } 
</script> 

<div ng-app > 
    <div ng-controller="main"> 

     Test A: {{testa}}<br /> 
     Test B: {{testb}}<br /> 
     Test C: {{testc}}<br /> 
     Test D: {{testd}}<br /> 

     <div> 
      testa (without ng-if): <input type="checkbox" ng-model="thisScope.testa" /> 
     </div> 
     <div ng-if="!testa"> 
      testb (with ng-if): <input type="checkbox" ng-model="thisScope.testb" /> 
     </div> 
     <div ng-show="!testa"> 
      testc (with ng-show): <input type="checkbox" ng-model="thisScope.testc" /> 
     </div> 
     <div ng-hide="testa"> 
      testd (with ng-hide): <input type="checkbox" ng-model="thisScope.testd" /> 
     </div> 

    </div> 
</div> 

होप्स इस मदद करता है, Yishay