Javascript 不包含数据的角度和链接下拉列表

我试图使我的视图包含3个下拉列表和一个提交按钮。我已经知道了如何在包含数据之前不显示下拉列表。我已经想出了如何在更改上一个下拉列表时加载它。然而，我有几个问题。下面是代码，然后我将解释这些问题：

观点：

<div ng-controller="UserCtrl">
    <div class="row" ng-show="$parent.loggedin">
        <div class="col-sm-3">
            <div class="form-group">
                <label for="lawType">Type of Law</label>
                <select class="form-control" id="lawType" ng-change="getCourthouse();" data-ng-model="typeoflaw">
                    <option value="0" selected>--Select a Type of Law--</option>
                    <option ng-repeat="type in typeoflaw" value="{{ type.LitigationCode}}">{{ type.LitigationType }}</option>
                </select>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="form-group" data-ng-show="courtHouse.length">
                <label for="courtHouse">Courthouse</label>
                <select class="form-control" id="courtHouse" data-ng-model="courtHouse" ng-change="getCourtroom();">
                    <option ng-repeat="bldg in courtHouse track by $index" value="{{ bldg.Loc_ID }}">{{ bldg.Loc_Name }}</option>
                </select>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="form-group" data-ng-show="courtRoom.length" data-ng-model="courtRoom">
                <label for="courtRoom">Department</label>
                <select class="form-control" id="courtRoom">
                    <option ng-repeat="room in courtRoom" value="{{ room.CourtRoom }}">{{ room.CourtRoom }}</option>
                </select>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="favorite-button">
                <button class="btn  btn-primary pull-left">Add Favorite</button>
            </div>
        </div>
    </div>
</div>

这些问题：

当第一个下拉列表“法律类型”加载时，它没有按照我在标记中的请求选择“-Select a Type of Law--”。事实上，在“选择法律类型”上方只有一个空条目，默认情况下它处于选中状态。如何在加载时选择列表中的初始条目？

当第一个下拉被改变（选择）时，它加载第二个下拉，但是第一个下拉则是空的，而不是前面提到的空白行和“选择一种类型的法律”条目。我如何使其保存数据并正确显示所选项目

当第二个下拉列表被更改时，它会加载第三个下拉列表，但与第一个下拉列表有相同的问题…它会清空自己，并且不会显示用户所做的选择。如何使其本身不为空，并且仍然显示用户所做的选择

---

谢谢

我解决在一个或多个控制器之间传递数据问题的方法是使用服务。 这是一个服务的例子

var NameService = function () {
    var service = this;
    service.property= value;
    service.getProperty = function () {
        return property;
    }
};
ngapp.service('NameService', NameService);

最酷的是，你可以将你的服务注入到你的控制器中

appcontroller.$inject = ['$scope', '$http', 'NameService'];
$.ajaxSetup({
    async: false
});
var NameCtrl = function ($scope, $http, NameService) {
    var Property = NameService.Property;
    $scope.update = function () {
        NameService.Property= $scope.Properties.selectedProperty.PropertyId;
    }
};
appcontroller.controller('NameCtrl', NameCtrl);

---

我解决在一个或多个控制器之间传递数据问题的方法是使用服务。 这是一个服务的例子

var NameService = function () {
    var service = this;
    service.property= value;
    service.getProperty = function () {
        return property;
    }
};
ngapp.service('NameService', NameService);

最酷的是，你可以将你的服务注入到你的控制器中

appcontroller.$inject = ['$scope', '$http', 'NameService'];
$.ajaxSetup({
    async: false
});
var NameCtrl = function ($scope, $http, NameService) {
    var Property = NameService.Property;
    $scope.update = function () {
        NameService.Property= $scope.Properties.selectedProperty.PropertyId;
    }
};
appcontroller.controller('NameCtrl', NameCtrl);

---

下面是我最终如何解决这个问题的

他认为：

<div ng-controller="UserCtrl">
    <div class="row" ng-show="$parent.loggedin">
        <div class="col-sm-3">
            <div class="form-group">
                <label for="lawType">Select a Type of Law</label>
                <select class="form-control" id="lawType" name="lawType" ng-change="getCourthouse();" ng-model="typeoflaw.LitigationType" ng-options="typeoflaw.LitigationType for typeoflaw in typeoflaw track by typeoflaw.LitigationCode" required>
                    <option value="">--Select a Type of Law--</option>
                   <!-- <option value="0" selected>--Select a Type of Law--</option>
                    <option ng-repeat="type in typeoflaw" value="{{ type.LitigationCode}}">{{ type.LitigationType }}</option>-->
                </select>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="form-group" ng-show="courtHouse.length">
                <label for="courtHouse">Select a Courthouse</label>
                <select class="form-control" id="courtHouse" name="courtHouse" ng-model="courtHouse.Loc_ID" ng-change="getCourtroom();" ng-options="courtHouse.Loc_Name for courtHouse in courtHouse track by courtHouse.Loc_Name" required>
                    <option value="">--Select a Courthouse--</option>
                    <!--<option ng-repeat="bldg in courtHouse track by $index" value="{{ bldg.Loc_ID }}">{{ bldg.Loc_Name }}</option>-->
                </select>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="form-group" ng-show="courtRoom.length">
                <label for="courtRoom">Select a Department</label>
                <select class="form-control" id="courtRoom" name="courtRoom" ng-model="courtRoom.CourtRoom" ng-options="courtRoom.CourtRoom for courtRoom in courtRoom track by courtRoom.CourtRoom" required>
                    <option value="">--Select a Department--</option>
                    <!-- <option ng-repeat="room in courtRoom" value="{{ room.CourtRoom }}">{{ room.CourtRoom }}</option>-->
                </select>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="favorite-button" ng-show="courtRoom.length">
                <button class="btn  btn-primary pull-left" ng-click="SavePreferences();">Add Favorite</button>
            </div>

        </div>
    </div>
    <div class="row" ng-show="userPreferences.length">
        <div class="col-sm-12 favorite-header">
            <h2>Your Saved Favorites</h2>
        </div>
        <div class="col-sm-12 favorite-filter">
            <input type="text" ng-model="query" placeholder="Filter your favorites list" />
        </div>
    </div>
    <div class="row" ng-show="userPreferences.length">
        <div class="col-sm-3 favorite-column-title">
            Courthouse
        </div>
        <div class="col-sm-3 favorite-column-title">
            Department
        </div>
        <div class="col-sm-3 favorite-column-title">
            Type of Law
        </div>
        <div class="col-sm-3 favorite-column-title">
            Default
        </div>
    </div>
    <div class="row" ng-show="userPreferences.length" ng-model="userPreferences" ng-repeat-start="userPreference in userPreferences | filter:query | orderBy: ['LocName', 'CourtRoom']">
        <div class="col-sm-3">
            <span class="get-path" ng-click="setPathValues(userPreference.LitigationCode, userPreference.LocID, userPreference.CourtRoom);">{{ userPreference.LocName }} ({{ userPreference.CourtRoom}})</span>
</div>
        <div class="col-sm-3">
            {{ userPreference.CourtRoom}}
        </div>
        <div class="col-sm-3">
            {{ userPreference.LitigationType }}
        </div>
        <div class="col-sm-3">
            <span ng-if="showDefaultIcon(userPreference.IsDefault);" class="glyphicon glyphicon-ok green-check" data-toggle="tooltip" data-placement="top" title="This is your default favorite and it cannot be deleted. Please mark another favorite as your default before attempting to delete this one." tooltip></span>
            <span ng-if="!showDefaultIcon(userPreference.IsDefault);" class="glyphicon glyphicon-star-empty red-star" ng-click="setAsDefault(userPreference.PreferenceID, userPreference.LitigationCode, userPreference.LocID, userPreference.CourtRoom);" data-toggle="tooltip" data-placement="top" title="Mark this favorite as your default." tooltip></span>
            <span ng-if="!showDefaultIcon(userPreference.IsDefault);" class="glyphicon glyphicon-remove delete-icon" ng-click="deletePreference(userPreference.PreferenceID);" data-toggle="tooltip" data-placement="top" title="Delete this favorite." tooltip></span>
        </div>
    </div>
    <div ng-repeat-end></div>
</div>

关键是ng选项：

ng-model="courtHouse.Loc_ID" " ng-options="courtHouse.Loc_Name for courtHouse in courtHouse track by courtHouse.Loc_Name"

---

当我像这样设置时，3个下拉列表完全同步。

以下是我最终解决问题的方法

他认为：

<div ng-controller="UserCtrl">
    <div class="row" ng-show="$parent.loggedin">
        <div class="col-sm-3">
            <div class="form-group">
                <label for="lawType">Select a Type of Law</label>
                <select class="form-control" id="lawType" name="lawType" ng-change="getCourthouse();" ng-model="typeoflaw.LitigationType" ng-options="typeoflaw.LitigationType for typeoflaw in typeoflaw track by typeoflaw.LitigationCode" required>
                    <option value="">--Select a Type of Law--</option>
                   <!-- <option value="0" selected>--Select a Type of Law--</option>
                    <option ng-repeat="type in typeoflaw" value="{{ type.LitigationCode}}">{{ type.LitigationType }}</option>-->
                </select>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="form-group" ng-show="courtHouse.length">
                <label for="courtHouse">Select a Courthouse</label>
                <select class="form-control" id="courtHouse" name="courtHouse" ng-model="courtHouse.Loc_ID" ng-change="getCourtroom();" ng-options="courtHouse.Loc_Name for courtHouse in courtHouse track by courtHouse.Loc_Name" required>
                    <option value="">--Select a Courthouse--</option>
                    <!--<option ng-repeat="bldg in courtHouse track by $index" value="{{ bldg.Loc_ID }}">{{ bldg.Loc_Name }}</option>-->
                </select>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="form-group" ng-show="courtRoom.length">
                <label for="courtRoom">Select a Department</label>
                <select class="form-control" id="courtRoom" name="courtRoom" ng-model="courtRoom.CourtRoom" ng-options="courtRoom.CourtRoom for courtRoom in courtRoom track by courtRoom.CourtRoom" required>
                    <option value="">--Select a Department--</option>
                    <!-- <option ng-repeat="room in courtRoom" value="{{ room.CourtRoom }}">{{ room.CourtRoom }}</option>-->
                </select>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="favorite-button" ng-show="courtRoom.length">
                <button class="btn  btn-primary pull-left" ng-click="SavePreferences();">Add Favorite</button>
            </div>

        </div>
    </div>
    <div class="row" ng-show="userPreferences.length">
        <div class="col-sm-12 favorite-header">
            <h2>Your Saved Favorites</h2>
        </div>
        <div class="col-sm-12 favorite-filter">
            <input type="text" ng-model="query" placeholder="Filter your favorites list" />
        </div>
    </div>
    <div class="row" ng-show="userPreferences.length">
        <div class="col-sm-3 favorite-column-title">
            Courthouse
        </div>
        <div class="col-sm-3 favorite-column-title">
            Department
        </div>
        <div class="col-sm-3 favorite-column-title">
            Type of Law
        </div>
        <div class="col-sm-3 favorite-column-title">
            Default
        </div>
    </div>
    <div class="row" ng-show="userPreferences.length" ng-model="userPreferences" ng-repeat-start="userPreference in userPreferences | filter:query | orderBy: ['LocName', 'CourtRoom']">
        <div class="col-sm-3">
            <span class="get-path" ng-click="setPathValues(userPreference.LitigationCode, userPreference.LocID, userPreference.CourtRoom);">{{ userPreference.LocName }} ({{ userPreference.CourtRoom}})</span>
</div>
        <div class="col-sm-3">
            {{ userPreference.CourtRoom}}
        </div>
        <div class="col-sm-3">
            {{ userPreference.LitigationType }}
        </div>
        <div class="col-sm-3">
            <span ng-if="showDefaultIcon(userPreference.IsDefault);" class="glyphicon glyphicon-ok green-check" data-toggle="tooltip" data-placement="top" title="This is your default favorite and it cannot be deleted. Please mark another favorite as your default before attempting to delete this one." tooltip></span>
            <span ng-if="!showDefaultIcon(userPreference.IsDefault);" class="glyphicon glyphicon-star-empty red-star" ng-click="setAsDefault(userPreference.PreferenceID, userPreference.LitigationCode, userPreference.LocID, userPreference.CourtRoom);" data-toggle="tooltip" data-placement="top" title="Mark this favorite as your default." tooltip></span>
            <span ng-if="!showDefaultIcon(userPreference.IsDefault);" class="glyphicon glyphicon-remove delete-icon" ng-click="deletePreference(userPreference.PreferenceID);" data-toggle="tooltip" data-placement="top" title="Delete this favorite." tooltip></span>
        </div>
    </div>
    <div ng-repeat-end></div>
</div>

关键是ng选项：

ng-model="courtHouse.Loc_ID" " ng-options="courtHouse.Loc_Name for courtHouse in courtHouse track by courtHouse.Loc_Name"

---

当我像这样设置时，3个下拉菜单完全同步。

您不需要在angular指令前面加上“data-”，因此

data ng model

可以是

ng model

。另外，在javascript中按ID从表单中获取元素对于angular应用程序来说是一种糟糕的做法。只需使用

ng model

绑定所需的数据，并直接通过

$scope

访问即可。这是使angular值得使用的主要因素。我在select上直接使用ng选项解决了一个类似的问题。你能用你的问题创建一个jsbin/JSFIDLE吗？@TomSlick我如何从ng模型和$scope中获取下拉列表的选定值？如果你的

ng模型
是“typeoflaw”，那么它应该是
$scope.typeoflaw
。您应该查看
ng选项
，但是对于下拉菜单，您不需要在angular指令前面加上“data-”，因此
data ng model
可以是
ng model
。此外，在javascript中通过ID从表单获取元素对于angular应用程序来说是一种糟糕的做法。只需使用
ng model
绑定所需的数据，并直接通过
$scope
访问即可。这是使angular值得使用的主要因素。我在select上直接使用ng选项解决了一个类似的问题。你能用你的问题创建一个jsbin/JSFIDLE吗？@TomSlick我如何从ng模型和$scope中获取下拉列表的选定值？如果你的
ng模型
是“typeoflaw”，那么它应该是
$scope.typeoflaw
。您应该查看
ng选项
，尽管对于下拉菜单，这个问题不是关于在控制器之间传递数据，但这个想法最终可能是我所需要的。您能否解决提出的三个问题，或者解释您的答案如何解决我问题中的三个问题？很抱歉，我没有看到这些问题//您将在哪里更新属性，并将用于启动事件以更新第二个下拉列表为了使用默认值$scope.update=function（）{PropertyService.property=$scope.Properties.selectedProperty..Name；}进行初始化，这个问题不是关于在控制器之间传递数据，但这个想法最终可能是我所需要的。您能否解决提出的三个问题，或者解释您的答案如何解决我问题中的三个问题？很抱歉，我没有看到这些问题//您将在哪里更新属性，并将用于启动事件以更新第二个下拉列表为了使用默认值$scope.update=function（）{PropertyService.property=$scope.Properties.selectedProperty..Name；}