Question

我正在尝试填充选择框和输入字段。

含义

每当有人尝试选择一个国家/地区时，我都会在输入框中设置相关货币，并在输出中显示国家/地区/货币。
每当有人尝试输入货币时，我都会在选项框中设置国家/地区，并在输出中显示国家/地区/货币。

我的控制器：

app.controller('MainCtrl', function ($scope) {           
    $scope.$watch('countrySelect', function () {
        for ($i = 0; $i < arr.length; $i++) {
            var temp = arr[$i]['select'];
            if (temp === $scope.countrySelect) {
                $scope.outputCountry = arr[$i].country + arr[$i].currency;
                $scope.countryCurrency = arr[$i].currency;
            }
        }
    });

    $scope.$watch('countryCurrency', function () {
        for ($i = 0; $i < arr.length; $i++) {
            var temp = arr[$i]['currency'];
            if (temp === $scope.countryCurrency) {
                $scope.outputCountry = arr[$i].country + $scope.countryCurrency;
                $scope.countrySelect = arr[$i].country;
            }
        }
    });
});

对应的div：

<div ng-controller="MainCtrl">
    <form action="#">
        <select ng-model="countrySelect" ng-init="countrySelect = 11">
            <option value="11">US</option>
            <option value="12">UK</option>
        </select>
        <input ng-model="countryCurrency" />
        <input ng-model="outputCountry" />
    </form>
</div>

我想出了this Plunker。

在不使用$scope.watch并多次触发的情况下，还有其他更好的方法吗？
在加载期间（默认情况下，在选择任何国家之前），$scope.watch不会触发，并且所有值都不会填充。

这里有指针吗？

Answer 1

<form>
Select your favorite fruit:
<select id="mySelect" onclick="myFunction()" >
  <option value="apple">Apple</option>
  <option value="orange">Orange</option>
  <option value="pineapple">Pineapple</option>
  <option value="banana">Banana</option>
</select>

<input type = "text" id = "TextBox1">


</form>




<script>
function myFunction() {
    var x = document.getElementById("mySelect").value;
    document.getElementById("TextBox1").value = x;
    
}
</script>

</body>
</html>

这是您要找的吗？

Answer 2

在第一个输入字段中输入“ usd”或“ sek”，或在选择框中选择国家/地区。

angular.module("app", [])
.controller('MainCtrl', function ($scope)
{
    $scope.countryCurrency = "";
    $scope.outputCountry = "";
    $scope.countries = [
        {
            name: "Sweden",
            currency: "SEK"
        },
        {
            name: "United States",
            currency: "USD"
        }
    ];
    $scope.selected = {
        country: $scope.countries[0].name
    };

    $scope.$watch("selected.country", function()
    {
        var country = $scope.countries.find(function(country)
        {
            return country.name == $scope.selected.country;
        });

        if(country)
        {
            $scope.outputCountry = country.name + country.currency;
            $scope.countryCurrency = country.currency;
        }
        else
        {
            $scope.outputCountry = "";
            $scope.countryCurrency = "";
        }
    });

    $scope.$watch("countryCurrency", function()
    {
        var country = $scope.countries.find(function(country)
        {
            return country.currency == $scope.countryCurrency.toUpperCase().trim();
        });

        if(country)
        {
            $scope.outputCountry = country.name + $scope.countryCurrency;
            $scope.selected.country = country.name;
        }
        else
        {
            $scope.outputCountry = "";
        }
    });
});

<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
<div ng-controller="MainCtrl">
    <form action="#">
        <select ng-model="selected.country">
            <option ng-repeat="country in countries" ng-value="country.name">{{ country.name }}</option>
        </select>
        <input ng-model="countryCurrency" />
        <input ng-model="outputCountry" />
    </form>
</div>
</body>
</html>

如何基于选择框填充输入字段，反之亦然

2 个答案: