Question

我正在使用下拉菜单，如果我选择农民，它将显示相应的输入框，如果我选择客户，它将显示相应的输入框。从下拉列表中选择值并单击按钮后，我尝试访问控制器中输入框的值。但它未定义。

<div class="container admin-advanced-search-window-container">
    <div class = "col-md-4 form-group dropdown">
        <label style="margin-left: 14rem">Search</label>
        <select  style="margin-left: 20rem;margin-top: -4rem;" kendo-drop-down-list = "typeSelectionList" required ng-model = "type" >
        <option oi-options selected = "true" value = "Farmers">Farmers</option>
            <option oi-options value = "Products">Products</option>
            <option oi-options value = "Customers">Customers</option>
            <option oi-options value = "Trips">Trips</option>
        </select>
    </div>
</div>

<div id = "Customers" ng-if= "type == 'Customers'">
<div class="container admin-advanced-search-window-container">

    <div class="col-sm-5">
        <input style="width: 24rem" type="text" name="firstName" ng-model="firstName" class="form-control" placeholder="First Name"
               title="First Name" />
    </div>
    <div class="col-sm-5">
        <input style="width: 24rem" type="text" name="lastName" ng-model="lastName" class="form-control" placeholder="Last Name"
               title="Last Name" />
    </div>

</div>
<div class="container admin-advanced-search-window-container">

    <div class="col-sm-5">
        <input style="width: 24rem" type="text" name="city" ng-model="city" class="form-control" placeholder="City"
               title="City" />
    </div>
    <div class="col-sm-5">
        <input style="width: 24rem" type="text" name="zipcode" ng-model="zipcode" class="form-control" placeholder="Zip Code"
               title="Zip Code" />
    </div>
</div>

<div class="col-sm-3">
</div>
<div class="col-sm-3">
    <button class="advanced-search-button btn btn-primary" type="button"  >Search</button>
</div>

<div id = "Farmers" ng-if = "type == 'Farmers'">
    <div class="container admin-advanced-search-window-container">

        <div class="col-sm-5">
            <input style="width: 24rem" type="text" name="firstName" ng-model="farmerfirstName" class="form-control" placeholder="First Name"
                   title="First Name" />
        </div>
        <div class="col-sm-5">
            <input style="width: 24rem" type="text" name="lastName" ng-model="lastName" class="form-control" placeholder="Last Name"
                   title="Last Name" />
        </div>

    </div>
    <div class="container admin-advanced-search-window-container">

        <div class="col-sm-5">
            <input style="width: 24rem" type="text" name="city" ng-model="city" class="form-control" placeholder="City"
                   title="City" />
        </div>
        <div class="col-sm-5">
            <input style="width: 24rem" type="text" name="zipcode" ng-model="zipcode" class="form-control" placeholder="Zip Code"
                   title="Zip Code" />
        </div>
    </div>

    <div class="col-sm-3">
    </div>
    <div class="col-sm-3">
        <button class="advanced-search-button btn btn-primary" type="button" ng-click = "advanacedSearchFarmers()">Search</button>
    </div>

</div>

这是我的控制器代码。

$scope.advanacedSearchFarmers = function(){
    var name = $scope.farmerfirstName;
    alert(name);
    var info = {
        "firstName" : $scope.firstName,
     "lastName" : $scope.lastName,
     "city" : $scope.city,
     "zipcode" : $scope.zipcode
    };
    alert("IN ad");
    var promise = AdminService.getFarmersByAdvancedSearch(info);
    promise.then(function(result){

    },function(err){
        alert("Error -"+err);
    });
}

当我尝试从下拉列表中选择农民并访问其名字时，它给我未定义。有人可以帮助我。我是棱角分明的新手。感谢

Answer 1

ng-if创建并销毁临时本地范围（请参阅reference）

作为测试，您可以尝试将ng-if更改为ng-show，然后查看行为是否正确。如果是这样，您应该重构代码以避免子范围问题。只需将所有输入变量放在一个对象中即可。

基本上只是转换像这样的情况

$scope.myInput

<input ng-if="..." ng-model="myInput" />

在这样的事情

$scope.Inputs = {};
$scope.Inputs.myInput;

<input ng-if="..." ng-model="Inputs.myInput" />

这样，新ng-if创建的控制器将尝试在父作用域中搜索已存在的Inputs对象。

Answer 2

假设在选择特定选项时，相应的div部分可见。

只是一个小指针。在顾客和在农民div中，名字属性绑定到不同的范围变量。

   ng-model="farmerfirstName" (farmer block)
   ng-model="firstName" (customer block)

因此，如果选择了农夫区块，则$ scope.firstName将被取消定义。

在控制器中使用ng-model取决于范围的值

2 个答案: