angularjs - angularjs - 在 ng-change 上传递选定对象的其他属性

Question

如何从下拉 / ng-options 中加载的 json 中获取其他属性

在 ng-change 上，我也喜欢传递所选对象的活动类型。

我怎么能做到这一点？

我的视图看起来像这样

  <div ng-app>
    <div ng-controller="cCtrl">
        <select ng-model="campaign" ng-options="c.id as c.name for c in campaigns" ng-change="search2(c.campaignType)">
            <option value="">-- choose campaign --</option>
        </select>
    </div>
</div>

我的控制器看起来像这样

  function cCtrl($scope) {

    $scope.campaigns = [{
        "custID": 1,
        "custName": "aaa ",
        "msgID": 3,
        "msgName": "Email Test Msg",
        "id": 2,
        "name": "Email Test Campaign",
        "description": "Test Campaign",
        "campaignType": "Email",
        "created": "1374229715",
        "isActive": 1,
        "isDeleted": 0
    }];

 $scope.search2 = function (campaignType) {
        alert(campaignType); // not working
        alert($scope.campaign.campaignType); // not working
        //console.log($scope.campaign.campaignType);

    }

}

http://jsfiddle.net/webtheveloper/Qgmz7/8/

Answer 1

您可以像这样将选定的对象传递给函数，而不是传入属性

<select ng-model="campaign" ng-options="c.name for c in campaigns" ng-change="search2(campaign)">

Working Demo

Answer 2

看看这个：http: //jsfiddle.net/Qgmz7/9/

您不在 ngRepeat 上下文中。ngOptions 的工作方式完全不同。

a 上的 ngModel<select>将获得 的值，而<option>不是整个对象。同样，您不在 ngRepeat 中，您无权访问您的对象。

无需将值作为参数传递，您可以从$scope. 事实上，你也不需要 ngChange，你可以$scope.$watch('campaign', ...)

所以

$scope.search2 = function () {
    console.log($scope.campaign);
}

Answer 3

你也可以这样尝试（Hack we can say），

<select ng-model="campaign" ng-options="c.id as c.name for c in campaigns" ng-change="search2(campaign,campaigns)">
        <option value="">-- choose campaign --</option>
</select>

基本上，这段代码所做的就是将 ng-model 与整个下拉列表一起传递给ng-change. 因此，在 search2 函数中，您可以将该ng-model值搜索到该列表中并获取所需的对象。

小提琴供参考：https ://jsfiddle.net/vaibhavgavali92/7b7xdyzj/18/

Answer 4

在某些情况下，例如仅显示选定的相应项目的成员值，不需要调用 Controller 函数。例如，如果要显示所选活动对应的活动类型，可以这样写。

<select ng-model="campaign" ng-options="c.name for c in campaigns">

...

<tr><td>Campaign Type:</td><td>{{campaign.campaignType}}</td></tr>
<tr><td>Campaign Description:</td><td>{{campaign.description}}</td></tr>