AngularJS将select元素的活动选项设置为不同角度对象的值

时间:2017-01-09 22:33:24

标签: javascript html angularjs

我已经研究过这个问题并且已经找到了使用php而不是有角度的解决方案。

在我的页面上保存数据的要求之一要求两个单独的角度对象具有相同的Id。以下是代码:

HTML

<select class="form-control" ng-model="temp" ng-options="type as type.Name for type in Displays">
</select>

AngularJS

$scope.Prop = Prop.data;
$scope.Displays = Displays.data;

我想要做的是在下拉列表中选择角度对象时,我想将Displays.Id指定为等于Prop.TestTemplateId。

我该怎么做?提前致谢

3 个答案:

答案 0 :(得分:3)

我知道您在下拉框中选择的值绑定到'$ scope.temp'。因此,在初始化控制器时,您可以观察该变量并使用新值更新“$ scope.testProp.TestTemplateId”,如下所示:

try with resources

这将使......

  • 棱角分明'$ scope.temp'
  • 每当该值发生变化时(例如通过下拉列表选择),将使用新值(和旧值)调用给定函数
  • 在该函数中,您可以更新'$ scope.testProp.TestTemplateId'

答案 1 :(得分:2)

您可以在<select>上使用ng-change指令,它会触发设置/更新属性值的函数。您可以从&#34; temp&#34;中检索所选项目的值。您在ngModel指令中定义的属性。

HTML:

<select class="form-control" ng-model="temp" ng-options="type as type.Name for type in Displays" ng-change="update()">
</select>

JS:

$scope.update = function() {
    // can retrieve value of selected item of "temp" ngModel property
    $scope.Prop.TestTemplateId = $scope.temp.id;
};

答案 2 :(得分:1)

简单的方法是ng-change

查看:

<select class="form-control"  
        ng-options="type as type.Name for type in Displays"
        ng-change="setId(type.Id)">
</select>

控制:

$scope.setId = function(Id){
    $scope.Prop.TestTemplateId = Id;
};

或者您可以直接在视图中设置值

<select class="form-control"  
        ng-options="type as type.Name for type in Displays"
        ng-change="Prop.TestTemplateId = type.Id;">
</select>