Question

我对Angularjs还是很陌生，并且遇到了其他问题似乎无法完全回答的情况。

这是我的视图

<select id = "nameField" class = "form-control" ng-model = "name" ng-change = "fillDataType(userDefinedVariable)">
                <option ng-repeat = "userDefinedVariable in userDefinedWorkflowVariables">{{userDefinedVariable.name}}</option>
                </select>

这是我的控制器

$scope.userDefinedVariables = [{name:"object1",dataType:"number",description:"description1"},
{name:"object2",dataType:"number",description:"description2"}]


$scope.fillDataType = function(userDefinedVariable) {
   console.log(userDefinedVariable) //undefined
   var dataType = userDefinedVariable.dataType; //not working

}

有没有一种方法可以将"userDefinedVariable"对象作为参数传递给我的fillDataType函数。

作为一种解决方法，我将ng-model（name）作为参数传递给我的fillDataType函数，并且在该函数中，Iam遍历userDefinedVariables以匹配所选名称，因此检索对象。

是否无法访问ng-repeat范围之外的对象？还是我在这里做错了。

Answer 1

不，您不能在ng-repeat之外使用变量。但是这里有另一种访问选定对象的方法。您可能想看看ng-options指令。您可以通过

替换要循环的代码

<select ng-options="userDefinedVariable as userDefinedVariable.name for userDefinedVariable  in userDefinedWorkflowVariables" ng-model="name"></select>

然后，您将在name中获得完整的对象，而不仅仅是标签。

请运行并检查其是否正常运行，否则，我将尝试创建正常的代码。

Answer 2

由于您正在使用ng-model="name"，因此可以直接在控制器中使用该值。请参见以下代码：

angular.module("app", []).controller('MainCtrl', function($scope) {
  $scope.userDefinedVariables = [{
      name: "object1",
      dataType: "number",
      description: "description1"
    },
    {
      name: "object2",
      dataType: "number",
      description: "description2"
    }
  ]


  $scope.fillDataType = function() {
    console.log($scope.name)
    var dataType = $scope.name.dataType;
  }
})

<html ng-app="app">
  <body ng-controller="MainCtrl">
    <select ng-options="u.name for u in userDefinedVariables" ng-model="name" ng-change="fillDataType()">
    </select>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
  </body>
</html>

Answer 3

在这种情况下，您可以在ng-model中选择整个对象，而不是对象userDefinedVariables的单一名称属性。尝试下面的代码。

<select ng-model="selectedName" ng-options="item as item.name for item in userDefinedWorkflowVariables" ng-change = "fillDataType(selectedName)"> </select>

Answer 4

使用ng-options

<style></style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.js"></script>
<script>
  $(document).ready(function(){
    $('#table_id td.color').each(function(){        
        if ($(this).html() > 1000) {
            $(this).css('color','#2e944b');
        }
    });
});
</script>
  <table class="table" id="table_id" >
    <tr>
      <th></th>
      <th>User ID</th>
      <th>Holdings</th>
    </tr>
    <tr>
      <td><b>Total</b></td>
      <td></td>
      <td class="color">900</td>
    </tr>
    <tr>
      <td><b>Total</b></td>
      <td></td>
      <td class="color">1001</td>
    </tr>
  </table>

AngularJS-在ng-repeat之外的ng-change上获取选定对象的其他属性

4 个答案: