Angularjs - Получить другие свойства выбранного объекта при ng-change вне ng-repeat - PullRequest
0 голосов
/ 28 февраля 2019

Я довольно новичок в 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 (имя) в качестве параметра моей функции fillDataType, и в этой функции Iam перебирает userDefinedVariables для соответствия выбранному имени, следовательно, получая объект.

Нет ли способаЯ могу получить доступ к объекту за пределами области действия ng-repeat?Или я тут что-то не так делаю.

Ответы [ 4 ]

0 голосов
/ 28 февраля 2019

используйте ng-options

<!DOCTYPE html>
    <html>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <body>

    <div ng-app="myApp" ng-controller="myCtrl">

    <select id="nameField" class="form-control" ng-model="selectedOption" ng-change="fillDataType()" ng-options="obj.name for obj in userDefinedWorkflowVariables">
                    
                    </select>
                    
                    

    </div>



    <script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
    $scope.selectedOption={};
        
       $scope.userDefinedWorkflowVariables = [{name:"object1",dataType:"number",description:"description1"},
    {name:"object2",dataType:"number",description:"description2"}]

    $scope.selectedOption =$scope.userDefinedWorkflowVariables[0]


    $scope.fillDataType = function() {
       console.log( $scope.selectedOption) 
       var dataType =  $scope.selectedOption.dataType;

    }
    });
    </script>

    </body>
    </html>
0 голосов
/ 28 февраля 2019

Поскольку вы используете 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>
0 голосов
/ 28 февраля 2019

В вашем случае вы можете выбрать целый объект в ng-модели вместо единственного свойства name объекта userDefinedVariables.Попробуйте следующий код ..

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

0 голосов
/ 28 февраля 2019

Нет, вы не можете использовать переменную в ng-repeat за ее пределами.Но здесь есть другой способ доступа к выбранному объекту. Возможно, вы захотите взглянуть на директиву ng-options.Вы можете заменить код для зацикливания на

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

. Затем вы получите полный объект в name вместо просто метки.

Пожалуйста, запустите и проверьте, работает ли он, еслине попробую создать рабочий код.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...