Question

我有几个相互关联的表单字段，我希望根据使用public class DateConverter extends StrutsTypeConverter { private DateFormat dateFormat; { ActionContext ctx = ActionContext.getContext(); ActionSupport action = (ActionSupport) ctx.getActionInvocation().getAction(); String formatString = action.getText("dateformat.ui"); dateFormat = new SimpleDateFormat(formatString); } public Object convertFromString(Map context, String[] values, Class toClass) { String input = values[0]; try { Date date = dateFormat.parse(input); Calendar cal = Calendar.getInstance(); cal.setTime(date); return cal; } catch (ParseException e) { return null; } } public String convertToString(Map context, Object object) { Calendar cal = (Calendar) object; return dateFormat.format(cal.getTime()); } }元素的单个选项更新所有表单字段。

假设用户选择表单字段中的特定国家/地区，然后我希望In [11]: [True if x is None else False for x in metrics] Out[11]: [True, True, False, False, True]字段和<select>字段与用户选择的国家/地区相关联。

例如：

HTML

countryCode

角

currency

我猜测最明显的方法是使用ng-model指令，但我已经用它来收集每个表单元素的信息以验证表单并发送到服务器。

我如何使用Angular.js以智能方式解决这个问题？

非常感谢！

Answer 1

我是这样做的 - 希望它有所帮助！

标记

<div ng-app>
    <div ng-controller="Ctrl">
        <select name="country" ng-options="item.country for item in countries" ng-model="currentItem" ng-change="updateVals()">
            <option value="">Pick a country</option>
        </select>

        <input name="countryCode" type="text" placeholder="Country Code" ng-model="currentCode">
        <input name="currency" type="text" placeholder="Currency" ng-model="currentCurrency">
    </div>
</div>

JS

function Ctrl($scope) {

    $scope.countries = [
    { country: "Sweden",  currency: "SEK", countryCode: "SE" },
    { country: "USA", currency: "USD", countryCode: "US" },
    { country: "Canada", currency: "CAD", countryCode: "CA" }
  ];


    $scope.updateVals = function() {
        if ($scope.currentItem) {
          $scope.currentCurrency = $scope.currentItem.currency;
            $scope.currentCode = $scope.currentItem.countryCode;
        } else {
            $scope.currentCurrency = undefined;   
            $scope.currentCode = undefined;
        }
    }

}

这里有效：http://jsfiddle.net/U3pVM/18965/

更新了小提琴以缩短所有内容：

http://jsfiddle.net/sx7xnoyr/1/

连接/同步Angular.js中的输入/表单域

1 个答案: