2014-01-29 81 views
0

我正在使用標籤從角度ui bootstrap。 所有工作正常,但我注意到,選項卡內的文本框沒有更新範圍,雖然使用ng模型。Angularjs UI標籤集範圍不更新

我搜索了一下,發現這是因爲子範圍和建議在綁定時使用obj.property表示法。

但仍然我的模型沒有被更新。

請指導我出錯的地方。

wbProcess.controller ("createProCtrl", function ($scope, $http, global, user){ 

$scope.project = [{protitle :""}, 
        {prodesc : ""}, 
        {chkarchive : false} 
       ]; 

$scope.tab = true; 

$scope.upurl; 

$scope.createpro = function(){ 
    $http({ 
     url: global.apiurl+"pro/create", 
     method: "POST", 
     data: {'name': $scope.project.protitle, 'prodesc': $scope.project.prodesc, 'owner': user.user_id , 'active': $scope.project.chkarchive} 
    }).success(function (data, status, headers, config) { 
      // assign $scope.persons here as promise is resolved here 
      //$log.log(data); 
      if(data.status > 0){ 
       $scope.tab = false; 

       } 
      else{ 

      } 
     }).error(function (data, status, headers, config) { 
      $scope.status = status; 
      $log.log(status); 
     }); 
} 


}); 

HTML是

<tabset> 
<tab> 
    <tab-heading> 
     <i class="green icon-edit bigger-110"></i>Description 
    </tab-heading> 
    <div> 
           <form name="createProForm" class="form-horizontal"> 

            <div class="control-group span7"> 
              <label class="control-label" for="form-field-1">Title</label> 

             <STYLE type="text/css"> 
               .ng-dirty.ng-valid ~ span.ok { color:green; display:inline; } 
               .ng-dirty.ng-invalid ~ span.ko { color:red; display:inline; } 
             </STYLE> 

             <div class="controls"> 
              <input type="text" name="protitle" id="projecttitle" ng-model="project.protitle" ng-unique="projects" placeholder="Title" required /> 

              <span class="red" ng-show="createProForm.protitle.$error.unique" > 
               &nbsp;&nbsp;<i class="red icon-asterisk bigger-110"></i>&nbsp;Project Title already exists.</span> 
              <!--<span class="green" ng-show="createProForm.protitle.$error.unique === false" > 
               &nbsp;&nbsp;<i class="green icon-asterisk bigger-110"></i>&nbsp;Available</span> 
              --> 
             </div> 

            </div> 

            <div class="control-group span5"> 

             <div class="controls"> 
              <input class="ace" type="checkbox" id="id-disable-check" ng-model="project.chkarchive" tabindex="-1"/> 
              <label class="lbl" for="id-disable-check"> Archive Project</label> 
             </div> 
            </div> 

            <div class="control-group"> 
             <label class="control-label" for="form-field-9">Project Description</label> 

             <div class="controls"> 
              <textarea class="span7" id="projecttitle" ng-model="project.prodesc" maxlength="100" placeholder="100 Character Limit" required></textarea> 
             </div> 
            </div> 

            <div class="form-actions"> 
             <button class="btn btn-info" type="button" ng-disabled="createProForm.protitle.$pristine || createProForm.protitle.$dirty && createProForm.protitle.$error.unique === true" ng-click="createpro()"> 
              <i class="icon-ok bigger-110"></i> 
              Save 
             </button> 

             &nbsp; &nbsp; &nbsp; 
             <button class="btn" type="reset"> 
              <i class="icon-undo bigger-110"></i> 
              Reset 
             </button> 
             <button class="btn btn-default btn-sm" ng-click="tabs[1].disabled = ! tabs[1].disabled">Enable/Disable third tab</button> 
            </div> 
            </form> 
          </div> 
</tab> 

<tab disabled = "tab"> 
    <tab-heading> 
     <i class="green icon-cogs bigger-110"></i>Configuration 
    </tab-heading> 
    <div> 
           <div class="span6"> 
            hi 
           </div> 
           <div id="dropzone" class="span6"> 
            <input type="hidden" id="upurl" value="{{ upurl }}" /> 
            <form action="/not-found" class="dropzone"> 
             <div class="fallback"> 
              <input name="file" type="file" multiple/> 
             </div> 
            </form> 
           </div> 
          </div> 
</tab> 

<tab disabled = "tab"> 
    <tab-heading> 
     <i class="green icon-group bigger-110"></i>Users 
    </tab-heading> 
    <div> 
           <p>Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade.</p> 
          </div> 
</tab> 

文本輸入是僅在第一個選項卡。

回答

0

有一種解決方案來訪問它。 您可以在控制器中使用以下語法訪問它。 $ scope。$$ childHead。$$ nextSibling.yourVariablename。

例如你有NG-模型= 「狀態」 html頁面上,你可以訪問它像這樣

$範圍。$$ childHead。$$ nextSibling.state

0

使用obj的建議。屬性符號綁定是因爲子範圍是正確的,但是您錯誤地將$scope.project定義爲列表而不是僅具有多個鍵/值對的簡單對象。

嘗試:

$scope.project = { 
    protitle: "", 
    prodesc : "", 
    chkarchive: false 
}; 

也見here