Question

我有3个文本框。这些是根据Ajax数据自动填充的。我可以确认AJAX工作正常。

Ajax代码

$scope.formData.city1 = data.city1;
$scope.formData.city = data.city;
$scope.formData.city2 = data.city2;

if(formData.city1 != ''){
     $scope.secondcity1 = true;
}else {$scope.secondcity1 = false;}

if(formData.city2 != ''){
     $scope.thirdcity2 = true;
}else{$scope.thirdcity2 = false;}

这里显示/隐藏div的代码。

formApp.controller('formProfile1', function($scope,$http){
    $scope.secondcity1;
    $scope.thirdcity2;      

    $scope.hidecity1 = function() {
        $scope.secondcity1 = false;
        $scope.city1 = ''; 
   }
   $scope.hidecity2 = function() { 
        $scope.thirdcity2 = false;
        $scope.city2 = '';
   }    

   $scope.showcity = function() { $scope.secondcity1 = true; }
   $scope.showcity1 = function() { $scope.thirdcity2 = true; }

HTML代码

<div id="firstcity">   
<div class="col-xs-10"><div class="topjob_resumetitle" ng-class="{ 'has-error' : errorcity }">
<input name="city" id="city" type="text" class="form-control textbox1 txt-auto" required="required" placeholder="Job Location* " ng-model="formData.city">
<div class = "errorba" ng-show="errorcity">{{errorcity}}</div>
</div></div>
<div class="col-xs-2">
</div>


<button type="button" class="addfields" ng-click="showcity()">+</button><br>
    </div>

<div ng-style="{'display':secondcity1 == false?'none':'block'">    

<div class="col-xs-9"><div class="topjob_resumetitle" ng-class="{ 'has-error' : errorcity1 }">
<input name="city1" id="city1" type="text" class="form-control textbox1 txt-auto" placeholder="Job Location* " ng-model="formData.city1">
<div class = "errorba" ng-show="errorcity">{{errorcity1}}</div>
</div></div>
<div class="col-xs-3">
<button type="button" class="remove" ng-click="hidecity1()">-</button>
<button type="button" class="addfields" ng-click="showcity1()">+</button><br>
</div>

</div>

<div ng-style="{'display':thirdcity2 == false?'none':'block'"> 
<div class="col-xs-10"><div class="topjob_resumetitle" ng-class="{ 'has-error' : errorcity2 }">
<input name="city2" id="city2" type="text" class="form-control textbox1 txt-auto" placeholder="Job Location* " ng-model="formData.city2">
<div class = "errorba" ng-show="errorcity2">{{errorcity2}}</div>
</div></div>
<div class="col-xs-2">
<button type="button" class="remove" ng-click="hidecity2()">-</button>
</div>

    </div>

我尝试了ng-style和ng-show但两者都没有用。我想要的是如果数据来自ajax然后显示相应的文本框。如果没有，则用户可以单击+按钮显示文本框。

目前ajax数据存在的所有框都可见，但是当我点击时 - 隐藏框不工作。

以下代码无法按预期使用ng-show / ng-style。

 $scope.hidecity1 = function() {
            $scope.secondcity1 = false;
            secondcity1 = false;
            $scope.city1 = ''; 
        }

显示/隐藏div不适用于Angularjs

0 个答案: