Question

我的html中有以下选择输入，使用class LoginScreen(GridLayout): def __init__(self, **kwargs): super(LoginScreen, self).__init__(**kwargs) self.cols = 2 self.add_widget(Label(text='username')) self.username = TextInput(multiline=False) self.add_widget(self.username) self.add_widget(Label(text='Password')) self.password = TextInput(multiline=False, password=True) self.add_widget(self.password) self.submit_button = Button(text='sumbit',size_hint=(.5, .25),font_size=20) self.submit_button.bind(on_press=self.submit_username) self.add_widget(self.submit_button) def submit_username(self, *args): self.msg=threading.Thread(target=send_data(self.username.text)) self.msg.start() self.msg.join() sm.current = 'searchi' sm.transition.direction = 'left' def send_data(name): my_socket = socket.socket() my_socket.connect(('127.0.0.1', 8093)) my_socket.send(name.encode('utf-8')) name,address = my_socket.recvfrom(1024) msg = name.decode('utf-8') alist.append(msg) my_socket.close() # Declare both screens class Searchi(Screen): def __init__(self, **kwargs): super(Searchi, self).__init__(**kwargs) self.add_widget(Label(text=alist[0]))填充。我想在

中向下显示所选的 NAME ，而我想将所选的 ID 发送回控制器。我从ng-options获得了所需的ID。如何显示所选名称？我还在选项中显示了名称。

ng-model="user.category"

Answer 1

如果你使retailerBranchId成为一种方法，你可以使用像lodash'_.find（）（甚至本机查找）这样的方法。你有user.category根据你的选择更新，你说它有id，你可以使用：

function retailerBranchId() {
  return _.get(_.find(this.categories, { id: user.category }), 'name', '');
}

这也没有优雅地失败;如果它找不到任何名称或任何与id匹配的项目，它将返回一个空字符串。

编辑：你会以类似的方式调用它：

<p>Available on: {{ user.retailerBranchId() }}</p>

虽然真的，最好像这样使用它：

<p data-ng-bind="'Available on: ' + user.retailerBranchId()"></p>

Answer 2

<select ng-model="user.category" ng-options="category for category in categories" class="form-control" class="select" required>
  <option value="{{category.name}}">Select a Category</option>
</select>
  
<p>Available On : {{user.category.id}}</p>

Answer 3

你可以试试下面的方法，

获取所选类别名称的控制器：

$scope.getSelectedCategoryDetail=function(selectedCat){
   angular.forEach($scope.categories, function(cat){
      if(selectedCat===cat.id){
         $scope.user.name=cat.name;
      }
   });
};

具有ng-change事件的模板：

<select ng-model="user.category" ng-options="category.id as category.name for category in categories" class="form-control" class="select" required>
  <option value="{{category.name}}" ng-change="getSelectedCategoryDetail(user.category)">Select a Category</option>
</select>


<p>Category Id : {{user.category}}</p>
<p>Category Name : {{user.name}}</p>

Answer 4

这是工作示例

试试这个

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">



<select ng-model="user.category" ng-options="category.id as category.name for category in categories" class="form-control" class="select" required>
  <option value="{{category.name}}">Select a Category</option>
</select>
  
<p>Available On :  {{getValue(user)}}</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.categories = [{
    	id:1,
    	name:'cate1',
    	retailerBranchId:'r1'
    },{
    	id:2,
    	name:'cate2',
    	retailerBranchId:'r2'
    },{
    	id:3,
    	retailerBranchId:'r3',
    	name:'cate3', 
    }];

    $scope.user = $scope.categories[0];

    $scope.getValue = function(selectedValue){
		if (selectedValue && selectedValue.category) {
			return $scope.categories[selectedValue.category-1].name;
		}

    }
});
</script>


</body>
</html>

如何在选择下拉列表中显示<p>中的选定名称并将选定的ID发送到AngularJS中的控制器？

4 个答案: